vue vxe-table表格
- 可以自定義選擇引入的模塊，減少項目的體積；
- 多主題，多圖標；
- 表格種類繁多；
- 擴展插件庫；
安裝vxe-table
npm install xe-utils vxe-table
在main.js中引入vxe-table
import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; import 'xe-utils'; import VXETable from 'vxe-table'; import 'vxe-table/lib/index.css'; Vue.use(VXETable); Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App) }).$mount("#app");
因為是全局全量引入，所以可以直接在頁面調用
<template> <div> <vxe-table border="inner" :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="address" title="籍貫"></vxe-table-column> </vxe-table> </div> </template> <script> export default { name: "Home", data() { return { tableData: [ { id: 10001, name: "張三", sex: "男", address: "上海市" }, { id: 10002, name: "李四", sex: "女", address: "北京市" }, { id: 10003, name: "王五", sex: "男", address: "天津市" } ] }; } }; </script>
運行效果
樹形數據表
<template> <div> <vxe-table border row-id="id" :data="tableData" :tree-config="{ children: 'children', expandAll: true }" > <vxe-table-column type="seq" width="180" title="序號" tree-node ></vxe-table-column> <vxe-table-column field="name" title="導航名稱"></vxe-table-column> <vxe-table-column field="url" title="URL"></vxe-table-column> </vxe-table> </div> </template> <script> export default { data() { return { tableData: [ { seq: 1, name: "系統管理", url: "", children: [ { seq: 10, name: "用戶管理", url: "sys/user" }, { seq: 11, name: "權限管理", url: "sys/right" }, { seq: 12, name: "角色管理", url: "sys/role" } ] }, { seq: 2, name: "報表管理", url: "report" } ] }; } }; </script>
效果如下
