通过type="expand"给el-table添加了子列表，导致hover背景色错乱了 怎么修复

可以通过以下两种方式来修复hover背景色错乱的问题：

1. 在自定义样式中添加以下代码：

.el-table__body-wrapper .has-gutter:hover > .el-table__row:not(.expanded) {
  background-color: #f5f7fa;
}

2. 在el-table上添加`:row-class-name`属性，将其设置为一个函数，返回一个字符串，用于设置每行的class名称。在这个函数中，可以根据`row`的`expanded`属性来判断是否为扩展行，从而设置不同的class名称。

<el-table :data="tableData" :row-class-name="rowClassName">
  <!-- 其他配置 -->
</el-table>

methods: {
  rowClassName({ row, rowIndex }) {
    return row.expanded ? 'expanded-row' : '';
  }
}

然后在自定义样式中添加以下代码：

.expanded-row:hover {
  background-color: #f5f7fa;
}

这样就可以解决hover背景色错乱的问题了。

相关问题

通过type="expand"给el-table添加了子列表，导致hover背景色错乱了，修复不起作用

这个问题可能是由于使用了 expand 属性后，子列表的样式覆盖了原本父列表的样式所导致的。解决这个问题可以尝试以下方法：

1. 在 el-table 中添加一个 slot-scope="props" 的属性，并在子组件中使用该属性继承父组件的样式：

<el-table :data="tableData" style="width: 100%">
  <el-table-column label="姓名" prop="name">
  </el-table-column>
  <el-table-column label="年龄" prop="age">
  </el-table-column>
  <el-table-column label="地址" prop="address" type="expand">
    <template slot-scope="props">
      <div class="child-table">
        <el-table :data="props.row.children" style="width: 100%">
          <el-table-column label="子列表姓名" prop="name">
          </el-table-column>
          <el-table-column label="子列表年龄" prop="age">
          </el-table-column>
        </el-table>
      </div>
    </template>
  </el-table-column>
</el-table>

2. 在样式中使用 /deep/ 或 ::v-deep 选择器来覆盖子组件的样式：

.el-table__row:hover {
  background-color: #f5f7fa !important;
}

/* 使用 /deep/ 选择器 */
.child-table /deep/ .el-table__row:hover {
  background-color: #f5f7fa !important;
}

/* 使用 ::v-deep 选择器 */
.child-table ::v-deep .el-table__row:hover {
  background-color: #f5f7fa !important;
}

以上两种方法都可以解决 hover 背景色错乱的问题，具体使用哪种方法可以根据实际情况选择。

el-table-cloumn type=expand

在Element UI的表格（el-table）中，`type=expand` 是一个特殊的列类型，它用于创建可展开的行或称为子表格（sub-table）。当设置为 `expand` 类型时，每行都会有一个可点击的图标或者按钮，点击后会显示一个隐藏的详细内容区域，通常用于展示或编辑关联的深层数据。

具体配置如下：

<el-table-column type="expand">
  <template slot-scope="scope">
    <!-- 这里是展开后显示的内容 -->
    <el-table :data="scope.row.subData" style="width: 100%"></el-table>
  </template>
</el-table-column>

这里的 `slot-scope="scope"` 是一个内联模板，其中的 `scope` 参数提供了当前行的数据和一些附加信息。你可以在模板中访问父级表格的数据，并在 `subData` 属性中定义展开后显示的具体子数据结构。