vue中的 vxe-table表格插件 实现树形数据表

• 增删改查

• 树表格

• 数据校验

• 数据代理

• 键盘导航

• 模态窗口

• 渲染器

• 虚拟滚动

• vxe-table 官网地址

例子

可以使用 <vxe-column …> 或者 <vxe-table-column …> 定义列信息，两种方式都能使用

安装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”);

因为是全局全量引入，所以可以直接在页面调用

=====================

运行效果

====

树形数据表

=====

<vxe-table

border

row-id=“id”

:data=“tableData”

:tree-config=“{ children: ‘children’, expandAll: true }”

<vxe-table-column

type=“seq”

width=“180”

title=“序号”

tree-node