elementui中树形表格切换展开不同层级怎么实现

发布时间：2022-08-24 17:00:43 作者：iii
来源：亿速云阅读：365

ElementUI中树形表格切换展开不同层级怎么实现

引言

在现代Web开发中，表格是展示数据的重要组件之一。随着数据复杂性的增加，传统的扁平表格已经无法满足需求，树形表格应运而生。树形表格不仅能够展示层级结构的数据，还能通过展开和折叠操作来动态显示或隐藏子层级数据。ElementUI作为一款流行的Vue.js组件库，提供了强大的树形表格组件，本文将详细介绍如何在ElementUI中实现树形表格，并探讨如何切换展开不同层级。

ElementUI简介

ElementUI是一套为开发者、设计师和产品经理准备的基于Vue.js的桌面端组件库。它提供了丰富的组件，如按钮、表单、表格、对话框等，帮助开发者快速构建高质量的Web应用。ElementUI的设计风格简洁、易用，且具有良好的文档和社区支持，因此在Vue.js生态系统中广受欢迎。

树形表格的基本概念

树形表格是一种特殊的表格形式，它能够展示具有层级结构的数据。与传统的扁平表格不同，树形表格的每一行可以包含子行，子行可以进一步展开或折叠。这种结构非常适合展示如组织结构、文件目录、分类目录等具有层级关系的数据。

树形表格的特点

层级结构：数据以树形结构展示，每个节点可以有子节点。
展开与折叠：用户可以通过点击节点前的图标来展开或折叠子节点。
动态加载：子节点可以在展开时动态加载，减少初始加载时间。
多级嵌套：支持多级嵌套，理论上可以无限层级。

ElementUI中的树形表格组件

ElementUI提供了el-table组件，通过配置tree-props属性，可以轻松实现树形表格。tree-props属性用于指定树形结构的配置，包括子节点的字段名、是否懒加载等。

`el-table`组件的基本用法

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  >
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '一级 1',
          date: '2023-01-01',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 11,
              name: '二级 1-1',
              date: '2023-01-01',
              address: '上海市普陀区金沙江路 1518 弄'
            }
          ]
        },
        {
          id: 2,
          name: '一级 2',
          date: '2023-01-02',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 21,
              name: '二级 2-1',
              date: '2023-01-02',
              address: '上海市普陀区金沙江路 1518 弄'
            },
            {
              id: 22,
              name: '二级 2-2',
              date: '2023-01-02',
              address: '上海市普陀区金沙江路 1518 弄',
              children: [
                {
                  id: 221,
                  name: '三级 2-2-1',
                  date: '2023-01-02',
                  address: '上海市普陀区金沙江路 1518 弄'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

`tree-props`属性详解

children：指定子节点的字段名，默认为children。
hasChildren：指定是否具有子节点的字段名，默认为hasChildren。如果该字段为true，则表示该节点具有子节点，可以展开。

实现树形表格的基本步骤

准备数据：确保数据具有层级结构，每个节点包含子节点的字段。
配置el-table：使用tree-props属性指定子节点的字段名。
定义列：使用el-table-column组件定义表格的列。
处理展开与折叠：通过el-table的事件和方法来控制节点的展开与折叠。

切换展开不同层级的实现方法

在实际应用中，我们可能需要根据用户的操作或业务需求，动态切换展开或折叠不同层级的节点。ElementUI提供了多种方法来实现这一功能。

1. 使用`expand-row-keys`属性

expand-row-keys属性用于控制哪些行是展开的。通过动态修改该属性的值，可以实现对不同层级节点的展开与折叠。

<template>
  <div>
    <el-button @click="expandAll">展开所有</el-button>
    <el-button @click="collapseAll">折叠所有</el-button>
    <el-table
      :data="tableData"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :expand-row-keys="expandedRows"
    >
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '一级 1',
          date: '2023-01-01',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 11,
              name: '二级 1-1',
              date: '2023-01-01',
              address: '上海市普陀区金沙江路 1518 弄'
            }
          ]
        },
        {
          id: 2,
          name: '一级 2',
          date: '2023-01-02',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 21,
              name: '二级 2-1',
              date: '2023-01-02',
              address: '上海市普陀区金沙江路 1518 弄'
            },
            {
              id: 22,
              name: '二级 2-2',
              date: '2023-01-02',
              address: '上海市普陀区金沙江路 1518 弄',
              children: [
                {
                  id: 221,
                  name: '三级 2-2-1',
                  date: '2023-01-02',
                  address: '上海市普陀区金沙江路 1518 弄'
                }
              ]
            }
          ]
        }
      ],
      expandedRows: []
    }
  },
  methods: {
    expandAll() {
      this.expandedRows = this.getAllIds(this.tableData)
    },
    collapseAll() {
      this.expandedRows = []
    },
    getAllIds(data) {
      let ids = []
      data.forEach(item => {
        ids.push(item.id)
        if (item.children && item.children.length > 0) {
          ids = ids.concat(this.getAllIds(item.children))
        }
      })
      return ids
    }
  }
}
</script>

2. 使用`toggleRowExpansion`方法

toggleRowExpansion方法用于手动切换某一行的展开状态。通过遍历表格数据，可以动态展开或折叠指定层级的节点。

<template>
  <div>
    <el-button @click="expandLevel(1)">展开一级</el-button>
    <el-button @click="expandLevel(2)">展开二级</el-button>
    <el-button @click="collapseAll">折叠所有</el-button>
    <el-table
      ref="table"
      :data="tableData"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '一级 1',
          date: '2023-01-01',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 11,
              name: '二级 1-1',
              date: '2023-01-01',
              address: '上海市普陀区金沙江路 1518 弄'
            }
          ]
        },
        {
          id: 2,
          name: '一级 2',
          date: '2023-01-02',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 21,
              name: '二级 2-1',
              date: '2023-01-02',
              address: '上海市普陀区金沙江路 1518 弄'
            },
            {
              id: 22,
              name: '二级 2-2',
              date: '2023-01-02',
              address: '上海市普陀区金沙江路 1518 弄',
              children: [
                {
                  id: 221,
                  name: '三级 2-2-1',
                  date: '2023-01-02',
                  address: '上海市普陀区金沙江路 1518 弄'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    expandLevel(level) {
      this.$refs.table.data.forEach(row => {
        this.toggleRowExpansion(row, level, 1)
      })
    },
    collapseAll() {
      this.$refs.table.data.forEach(row => {
        this.$refs.table.toggleRowExpansion(row, false)
      })
    },
    toggleRowExpansion(row, targetLevel, currentLevel = 1) {
      if (currentLevel < targetLevel) {
        this.$refs.table.toggleRowExpansion(row, true)
        if (row.children && row.children.length > 0) {
          row.children.forEach(child => {
            this.toggleRowExpansion(child, targetLevel, currentLevel + 1)
          })
        }
      }
    }
  }
}
</script>

3. 使用`lazy`属性实现懒加载

对于数据量较大的树形表格，可以使用lazy属性实现懒加载。懒加载可以在用户展开节点时动态加载子节点数据，减少初始加载时间。

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    :load="load"
    lazy
  >
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '一级 1',
          date: '2023-01-01',
          address: '上海市普陀区金沙江路 1518 弄',
          hasChildren: true
        },
        {
          id: 2,
          name: '一级 2',
          date: '2023-01-02',
          address: '上海市普陀区金沙江路 1518 弄',
          hasChildren: true
        }
      ]
    }
  },
  methods: {
    load(tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: tree.id * 10 + 1,
            name: `二级 ${tree.id}-1`,
            date: '2023-01-01',
            address: '上海市普陀区金沙江路 1518 弄'
          },
          {
            id: tree.id * 10 + 2,
            name: `二级 ${tree.id}-2`,
            date: '2023-01-02',
            address: '上海市普陀区金沙江路 1518 弄',
            hasChildren: true
          }
        ])
      }, 1000)
    }
  }
}
</script>

代码示例与解析

示例1：基本树形表格

<template>
  <el-table
    :data="tableData"
    row-key="id"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
  >
    <el-table-column prop="name" label="名称"></el-table-column>
    <el-table-column prop="date" label="日期"></el-table-column>
    <el-table-column prop="address" label="地址"></el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '一级 1',
          date: '2023-01-01',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 11,
              name: '二级 1-1',
              date: '2023-01-01',
              address: '上海市普陀区金沙江路 1518 弄'
            }
          ]
        },
        {
          id: 2,
          name: '一级 2',
          date: '2023-01-02',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 21,
              name: '二级 2-1',
              date: '2023-01-02',
              address: '上海市普陀区金沙江路 1518 弄'
            },
            {
              id: 22,
              name: '二级 2-2',
              date: '2023-01-02',
              address: '上海市普陀区金沙江路 1518 弄',
              children: [
                {
                  id: 221,
                  name: '三级 2-2-1',
                  date: '2023-01-02',
                  address: '上海市普陀区金沙江路 1518 弄'
                }
              ]
            }
          ]
        }
      ]
    }
  }
}
</script>

示例2：动态展开与折叠

<template>
  <div>
    <el-button @click="expandAll">展开所有</el-button>
    <el-button @click="collapseAll">折叠所有</el-button>
    <el-table
      :data="tableData"
      row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      :expand-row-keys="expandedRows"
    >
      <el-table-column prop="name" label="名称"></el-table-column>
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          name: '一级 1',
          date: '2023-01-01',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 11,
              name: '二级 1-1',
              date: '2023-01-01',
              address: '上海市普陀区金沙江路 1518 弄'
            }
          ]
        },
        {
          id: 2,
          name: '一级 2',
          date: '2023-01-02',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 21,
              name: '二级 2-1',
              date: '2023-01-02',
              address: '上海市普陀区金沙江路 1518 弄'
            },
            {
              id: 22,
              name: '二级 2-2',
              date: '2023-01-02',
              address: '上海市普陀区金沙江路 1518 弄',
              children: [
                {
                  id: 221,
                  name: '三级 2-2-1',
                  date: '2023-01-02',
                  address: '上海市普陀区金沙江路 1518 弄'
                }
              ]
            }
          ]
        }
      ],
      expandedRows: []
    }
  },
  methods: {
    expandAll() {
      this.expandedRows = this.getAllIds(this.tableData)
    },
    collapseAll() {
      this.expandedRows = []
    },
    getAllIds(data) {
      let ids = []
      data.forEach(item => {
        ids.push(item.id)
        if (item.children && item.children.length > 0) {
          ids = ids.concat(this.getAllIds(item.children))
        }
      })
      return ids
    }
  }
}
</script>

示例3：懒加载树形表格

”`vue