eltable 树形表格隔行变色

Question

displayeltable 树形表格斑马纹样式错乱，保证第一级隔行变色

Answer 1

该回答引用自GPT-deepseek, 由博主 GISer Liu 编写：

问题分析

用户在使用 el-table 组件实现树形表格时，遇到了斑马纹样式错乱的问题，具体表现为隔行变色效果在树形结构中不一致。用户希望确保第一级的数据能够正确地隔行变色。

解决方案

为了解决这个问题，我们需要对 el-table 的样式进行自定义，确保在树形结构中，第一级的数据能够正确地应用隔行变色效果。

1. 修改 CSS 样式

首先，我们需要通过 CSS 来控制表格的隔行变色效果。我们可以使用 :nth-child 选择器来实现这一点。

2. 确保样式应用到第一级数据

由于 el-table 的树形结构会导致子节点继承父节点的样式，我们需要确保只有第一级的数据应用隔行变色效果。

具体实现

以下是具体的代码实现：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    border
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="name"
      label="名称"
      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,
        name: '第一级1',
        address: '地址1',
        children: [{
          id: 2,
          name: '第二级1',
          address: '地址2',
        }, {
          id: 3,
          name: '第二级2',
          address: '地址3',
        }]
      }, {
        id: 4,
        name: '第一级2',
        address: '地址4',
        children: [{
          id: 5,
          name: '第二级3',
          address: '地址5',
        }]
      }]
    }
  }
}
</script>

<style scoped>
.el-table .el-table__row:nth-child(even) {
  background-color: #f0f9eb; /* 隔行变色效果 */
}
</style>

解释

1. 模板部分：

   • 使用 el-table 组件，并通过 row-key 和 tree-props 属性来配置树形结构。
   • 定义了两列数据：名称和地址。

2. 脚本部分：

   • 定义了 tableData 数据，包含两级树形结构的数据。

3. 样式部分：

   • 使用 .el-table .el-table__row:nth-child(even) 选择器来为偶数行的第一级数据应用背景色，实现隔行变色效果。

通过以上实现，可以确保 el-table 树形表格的第一级数据能够正确地应用隔行变色效果，从而解决斑马纹样式错乱的问题。

如果该回答解决了您的问题，请采纳！如果没有，请私信联系或评论您的疑惑