【elementUI】el-table树形结构样式修改-gif展示说明 按要求自取即可

在Element UI的el-table组件中，要实现树形结构并对其进行样式修改，可以使用row-key属性来为每个节点指定唯一的key，并通过expand-row-keys属性控制展开的节点。然后通过自定义列模板或使用scoped slot来实现特定的树形结构样式。

以下是一个简单的示例，展示如何使用Element UI的el-table组件来实现带有树形结构的表格，并对其样式进行修改：

<template>
  <el-table
    :data="tableData"
    style="width: 100%; margin-bottom: 20px"
    row-key="id"
    border
    :tree-props="{ children: 'children' }"
    :expand-row-keys="expandRowKeys"
  >
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
    ></el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      sortable
      width="180"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
    ></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: 1,
          date: '2016-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄',
          children: [
            {
              id: 2,
              date: '2016-05-02',
              name: '李四',
              address: '上海市普陀区金沙江路 1517 弄'
            }
          ]
        }
      ],
      expandRowKeys: [1]
    };
  }
};
</script>

在这个例子中，row-key属性设置为id，以确保每个节点都有一个唯一的标识。expand-row-keys是一个数组，包含了当前展开的节点id。tree-props属性用于指定树形数据的属性名，例如，子节点默认通过children属性来识别。

这段代码提供了一个简单的树形结构的el-table，其中只有一个根节点和一个子节点。你可以根据实际需求进行样式的自定义，比如添加图标、改变行的颜色等。