vxe-table树型表格的用法

vxe-table是一个基于Vue.js的表格组件库，可以实现树型表格的展示和操作。下面是使用vxe-table实现树型表格的步骤：

安装vxe-table组件库

在命令行中输入以下命令：

npm install vxe-table --save

引入vxe-table组件库

在Vue组件中引入vxe-table组件库：

<template>
  <div>
    <vxe-table :data="data" :tree-config="treeConfig"></vxe-table>
  </div>
</template>

<script>
import 'vxe-table/lib/style.css'
import VXETable from 'vxe-table'

export default {
  name: 'MyComponent',
  components: {
    'vxe-table': VXETable.Table
  },
  data() {
    return {
      data: [
        {
          name: 'Node1',
          children: [
            {
              name: 'Node1-1'
            },
            {
              name: 'Node1-2'
            }
          ]
        },
        {
          name: 'Node2',
          children: [
            {
              name: 'Node2-1'
            },
            {
              name: 'Node2-2'
            }
          ]
        }
      ],
      treeConfig: {
        children: 'children',
        hasChild: 'children'
      }
    }
  }
}
</script>

配置树型表格

在data中定义表格数据，可以使用children属性表示子节点，然后在treeConfig中配置树型表格相关参数，例如children表示子节点的属性名，hasChild表示是否有子节点。

自定义单元格渲染

可以使用slot插槽对树型表格进行自定义渲染，例如可以在单元格中添加展开/折叠按钮。

<template>
  <div>
    <vxe-table :data="data" :tree-config="treeConfig">
      <template #cell(name)="data">
        <span>{{ data.cellValue }}</span>
        <span v-if="data.row.children">
          <i class="iconfont icon-arrow-right"
             :class="{ rotate: data.row._expand }"
             @click="toggle(data.row)"></i>
        </span>
      </template>
    </vxe-table>
  </div>
</template>

<script>
import 'vxe-table/lib/style.css'
import VXETable from 'vxe-table'

export default {
  name: 'MyComponent',
  components: {
    'vxe-table': VXETable.Table
  },
  data() {
    return {
      data: [
        {
          name: 'Node1',
          children: [
            {
              name: 'Node1-1'
            },
            {
              name: 'Node1-2'
            }
          ]
        },
        {
          name: 'Node2',
          children: [
            {
              name: 'Node2-1'
            },
            {
              name: 'Node2-2'
            }
          ]
        }
      ],
      treeConfig: {
        children: 'children',
        hasChild: 'children'
      }
    }
  },
  methods: {
    toggle(row) {
      row._expand = !row._expand
    }
  }
}
</script>

在cell(name)插槽中，可以通过data参数获取单元格的值、行数据和列数据，然后根据行数据中是否有children属性来判断是否需要添加展开/折叠按钮。toggle方法用于切换行数据的展开/折叠状态。在样式中，可以使用rotate类来控制展开/折叠按钮的旋转效果。

更多vxe-table的用法可以参考官方文档：https://xuliangzhan_admin.gitee.io/vxe-table/zh/guide/tree.html。