通过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 背景色错乱的问题，具体使用哪种方法可以根据实际情况选择。

vue2中 el-table 可以通过设置type=“expand” 来设置展开项 但是我想没有子数据的行数展开项按钮变为禁用 应该怎么做

可以通过在 `el-table` 组件中使用 `slot-scope` 属性来自定义每一行的内容，然后在每一行中根据是否有子数据来决定是否显示展开按钮，并且在没有子数据的行中禁用展开按钮。具体步骤如下：

1. 在 `el-table` 组件中添加 `slot-scope` 属性，指定每一行的内容：

<el-table :data="tableData">
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column type="expand">
    <template slot-scope="scope">
      <!-- 判断当前行是否有子数据，如果有则显示展开按钮，否则禁用展开按钮 -->
      <el-button :disabled="!scope.row.children" type="text" @click="handleExpand(scope.row)">展开</el-button>
    </template>
  </el-table-column>
</el-table>

2. 在数据源 `tableData` 中添加一个 `children` 字段，用来表示该行是否有子数据：

data() {
  return {
    tableData: [
      { name: '张三', age: 18, children: [{ name: '张三的子数据1', age: 20 }, { name: '张三的子数据2', age: 22 }] },
      { name: '李四', age: 20 },
      { name: '王五', age: 22, children: [{ name: '王五的子数据1', age: 24 }, { name: '王五的子数据2', age: 26 }] }
    ]
  }
}

3. 在点击展开按钮时，根据当前行的数据来处理展开的逻辑：

methods: {
  handleExpand(row) {
    // 根据当前行的数据来处理展开的逻辑
    console.log(row)
  }
}

这样就可以实现没有子数据的行数展开项按钮变为禁用的效果了。