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>
效果如下
