【帮解决bug系列】vue在elementUI的el-table下添加嵌套行时，出现影子行的问题解决

在Vue中使用Element UI的el-table组件时，如果遇到嵌套行（使用el-table-column的嵌套）导致影子行出现问题，可能是由于渲染错误或是样式冲突引起的。

解决方法通常包括以下几个步骤：

1. 确保Element UI的版本是最新的，或者至少是稳定版本。
2. 检查是否有样式冲突，尤其是与自定义CSS规则的冲突。
3. 如果是由于样式导致的问题，可以尝试重写或调整影子行的样式。
4. 确保嵌套行的数据正确，并且每个嵌套行都有唯一的key。
5. 如果问题依然存在，可以尝试简化表格的结构，逐步排除可能的冲突源。

示例代码：

<template>
  <el-table :data="tableData" style="width: 100%">
    <el-table-column prop="date" label="日期" width="180">
    </el-table-column>
    <el-table-column label="配送信息">
      <el-table :data="innerData" style="width: 100%">
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2016-05-02',
          name: '张三',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        // ... 更多数据
      ],
      // 嵌套表格的数据
      innerData: [
        {
          name: '李四',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        // ... 更多数据
      ]
    };
  }
};
</script>

在这个例子中，我们使用了嵌套的el-table组件来在el-table-column中创建嵌套行。每个嵌套表格都有自己的数据集innerData。确保每个数据项都有唯一的key，比如通过v-for指令中的索引或者其他唯一标识。

如果问题依然存在，可以通过调试工具检查影子行的样式，并进行相应的修正。如果是Element UI的bug，可以考虑在Element UI的GitHub仓库中查找相关问题报告，或者提交新的问题。