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

开门见山看效果图，看是不是你想要的

vxe-table（先来看看这个强大组件是什么样子）

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟滚动、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、虚拟列表、模态窗口、自定义模板、渲染器、贼灵活的配置项、扩展接口等…

git地址：vxe-table.

vxe-table官方文档：点击查看发现新大陆，建议收藏，留着备用.

组件中有详细的开发指南，其实不用做我过多的介绍，根据你的需求可以进行安装和使用！
但是呢，既然分享这个组件啦，那就顺便给大家展示一下在vue项目中使用的具体步骤吧，也算自己再学习学习！

vxe-table组件在vue中实现步骤

第一步：还是先安装

依赖库：vue 2.6+, xe-utils 2.4+

// npm安装 xe-utils 和 vxe-table  
 npm install xe-utils vxe-table
1
2

第二步：在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
1
2
3
4
5
6
7
8
9
10

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

<template>
  <div >
    <vxe-toolbar>
          <template v-slot:buttons>
            <vxe-button @click="$refs.xTree.toggleTreeExpansion(tableData[0], true)">切换第一个</vxe-button>
            <vxe-button @click="$refs.xTree.setTreeExpansion(tableData[2], true)">展开第三个</vxe-button>
            <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>
            <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
          </template>
        </vxe-toolbar>

        <vxe-table
          resizable
          border
          ref="xTree"
          :tree-config="{children: 'children'}"
          :edit-config="{trigger: 'click', mode: 'row'}"
          :checkbox-config="{labelField: 'id'}"
          :data="tableData">
          <vxe-table-column type="checkbox" title="ID" tree-node></vxe-table-column>
          <vxe-table-column field="name" title="Name" :edit-render="{name: 'input'}"></vxe-table-column>
          <vxe-table-column field="size" title="Size" :edit-render="{name: 'input'}"></vxe-table-column>
          <vxe-table-column field="type" title="Type" :edit-render="{name: 'input'}"></vxe-table-column>
          <vxe-table-column field="date" title="Date" :edit-render="{name: '$input', props: {type: 'date'}}"></vxe-table-column>
        </vxe-table>
  </div>
</template>

<script>
    export default {
          data () {
            return {
              tableData: []
            }
          },
          created () {
            this.tableData = window.MOCK_TREE_DATA_LIST
          }
     }
              
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

好了，这样你想要的树形可编辑表格就展示啦，如果你的项目有这中需求，可以试试！