Vue中的vxe-table基本使用教程2
阿新 • • 發佈：2021-01-08
技術標籤：vue
脫離Vue專案環境和Vue伺服器，直接CDN匯入檔案，線上執行。
注意：vue、xe-utils、vxe-table必須在開頭就匯入，而我們自定義的main.js需要放在最後匯入，這樣才能把資料載入到頁面，而main.css在開頭或最後匯入均可。
1. html中的程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script> <script src="https://cdn.jsdelivr.net/npm/vxe-table"></script> <!-- 使用 cdn 引用方式需要注意是否鎖定版本，預設指向最新版本 --> <link rel="stylesheet" href="./css/main.css"> </head> <body> <div id="app"> <template> <div> <vxe-toolbar> <template v-slot:buttons> <vxe-button @click="allAlign = 'left'">居左</vxe-button> <vxe-button @click="allAlign = 'center'">居中</vxe-button> <vxe-button @click="allAlign = 'right'">居右</vxe-button> </template> </vxe-toolbar> <vxe-table border show-header-overflow show-overflow highlight-hover-row :align="allAlign" :data="tableData"> <vxe-table-column type="seq" width="60" title="序號"></vxe-table-column> <vxe-table-column field="name" title="姓名"></vxe-table-column> <vxe-table-column field="sex" title="性別"></vxe-table-column> <vxe-table-column field="date" title="日期"></vxe-table-column> <vxe-table-column field="address" title="地址"></vxe-table-column> </vxe-table> </div> </template> </div> </body> <script src="./js/main.js"></script> </html>
2. main.css中的程式碼
@import url("https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css");
.vxe-textarea--inner {
line-height: inherit;
}3. main.js中的程式碼
var Main = { data() { return { allAlign: "center", tableData: [] } }, created () { var list = []; for(var index = 0; index < 5; index++){ list.push({ name: 'test' + index, role: 'developer', sex: '男', date: '2019-05-01', time: 1556677810888 + index * 500, region: 'ShenZhen', address: 'address abc' + index }) } this.tableData = list } }; var app = new Vue(Main).$mount('#app');
4. 直接點選IDE中的瀏覽器圖示，而不在用使用vue中的伺服器就可顯示頁面，效果如圖
