博客

element-ui之树形表格(treetable&&treegrid)

  • Post category:other

Element-UI之树形表格(treetable&&treegrid)

Element-UI是一套基于Vue.js的UI组件库，提供了丰富的组件和功能。其中，树形表格(treetable&&treegrid)是一种常用的组件，用于展示具有层级关系的数据。本文将介绍如何使用Element-UI的树形表格组件，并提供两个示例说明。

1. treetable和treegrid的区别

在Element-UI中，树形表格有两种实现方式：treetable和treegrid。它们的区别在于：

  • treetable：每一行都可以展开子行，子行和父行在同一级别。
  • treegrid：每一行都可以展开子行，子行和父行在不同的级别。

2. 使用treetable实现树形表格

使用treetable实现树形表格的步骤如下：

  1. 引入treetable组件：
<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui'

export default {
  components: {
    ElTable,
    ElTableColumn
  },
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          address: '北京市朝阳区',
          children: [
            {
              name: '李四',
              age: 20,
              address: '北京市海淀区'
            },
            {
              name: '王五',
              age: 22,
              address: '北京市西城区'
            }
          ]
        },
        {
          name: '赵六',
          age: 25,
          address: '北京市东城区'
        }
      ]
    }
  }
}
</script>

上面的代码使用了treetable组件展示了一个包含层级关系的数据。

  1. 配置展开行：
<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div>
            <el-table :data="props.row.children" style="width: 100%">
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="age" label="年龄"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

上面的代码使用了type="expand"配置了展开行，并使用了slot-scope插槽自定义了展开行的内容。

3. 使用treegrid实现树形表格

使用treegrid实现树形表格的步骤如下：

  1. 引入treegrid组件：
<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column type="expand"></el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { ElTable, ElTableColumn } from 'element-ui'

export default {
  components: {
    ElTable,
    ElTableColumn
  },
  data() {
    return {
      tableData: [
        {
          name: '张三',
          age: 18,
          address: '北京市朝阳区',
          hasChildren: true,
          children: [
            {
              name: '李四',
              age: 20,
              address: '北京市海淀区',
              hasChildren: false
            },
            {
              name: '王五',
              age: 22,
              address: '北京市西城区',
              hasChildren: false
            }
          ]
        },
        {
          name: '赵六',
          age: 25,
          address: '北京市东城区',
          hasChildren: false
        }
      ]
    }
  }
}
</script>

上面的代码使用了treegrid组件展示了一个包含层级关系的数据。

  1. 配置展开行：
<template>
  <div>
    <el-table :data="tableData" style="width: 100%" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <el-table-column type="expand">
        <template slot-scope="props">
          <div>
            <el-table :data="props.row.children" style="width: 100%" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
              <el-table-column type="expand"></el-table-column>
              <el-table-column prop="name" label="名称"></el-table-column>
              <el-table-column prop="age" label="年龄"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

上面的代码使用了type="expand"配置了展开行，并使用了slot-scope插槽自定义了展开行的内容。同时，使用了:tree-props配置了treegrid的相关属性。

Tags: