vxe-table：一个基于vue功能强大的表格组件（支持树形，编辑，增删改查以及校验等）

第二步：在main.js中引入

import Vue from ‘vue’

import ‘xe-utils’

import VXETable from ‘vxe-table’

import ‘vxe-table/lib/index.css’

Vue.use(VXETable)

// 给 vue 实例挂载全局窗口对象

//如果用不到这个组件的弹窗可以不写，根据个人使用情况而定

Vue.prototype.$XModal = VXETable.modal

第三步：在需要的组件中使用

<vxe-button @click=“$refs.xTree.toggleTreeExpansion(tableData[0], true)”>切换第一个

<vxe-button @click=“$refs.xTree.setTreeExpansion(tableData[2], true)”>展开第三个

<vxe-button @click=“$refs.xTree.setAllTreeExpansion(true)”>展开所有

<vxe-button @click=“$refs.xTree.clearTreeExpand()”>关闭所有

<vxe-table

resizable

border

ref=“xTree”

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

:edit-config=“{trigger: ‘click’, mode: ‘row’}”

:checkbox-config=“{labelField: ‘id’}”

:data=“tableData”>