技術標籤：vue

注意：此篇是在Vue專案中執行的，後期全部都線上執行，不在依賴本地Vue專案環境，直接依賴CDN中的檔案即可

1. 安裝vxe-table及其依賴包

使用淘寶的映象下載比較快
cnpm install xe-utils vxe-table

2. vue專案下的src目錄下的main.js中匯入相關模組

main.js中增加如下幾行程式碼

import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'
Vue.use(VXETable);

3. src目錄下的App.vue檔案中刪除原有程式碼，輸入如下程式碼

<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" title="序號" width="60"></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="age" title="年齡"></vxe-table-column>
        </vxe-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                allAlign: "center",
                tableData: [
                    {id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'vxe-table 從入門到放棄'},
                    {id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou'},
                    {id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai'},
                    {id: 10004, name: 'Test4', role: 'Designer', sex: 'Women ', age: 24, address: 'Shanghai'}
                ]
            }
        }
    }
</script>
 

4. 頁面顯示效果如圖：

5. 官方文件地址

https://xuliangzhan_admin.gitee.io/vxe-table/#/table/base/basic