解决element-ui表格字段用expand展开行时其他字段也会同时展开的问题

在Element UI的表格组件中，当使用`expand`属性来展开某一列并显示详细内容时，有时可能会遇到所有字段都会跟着一起展开的问题。这是因为默认情况下，表格的`row-class-name`或`expanded-row-key`特性可能导致了所有行的展开与折叠同步。

解决这个问题，你可以采取以下几个步骤：

1. **避免全局展开效果**：如果你只想让特定列可以展开，而不是整个表格，确保你在设置`expanded-columns`时只包含需要展开的那一列。

<el-table :data="tableData" :expanded-columns="['expandColumnKey']">
  ...
</el-table>

2. **指定每个行的唯一键**：通过`expanded-row-key`属性，为每个展开项提供一个唯一的标识符，这将允许独立控制每个条目的展开状态。

<el-table :data="tableData" :expanded-row-key="(row) => row.id">
  ...
</el-table>

3. **自定义渲染函数**：如果你想更精细地控制展开部分的行为，可以使用`render`属性创建一个自定义模板，并在其中处理展开和折叠事件，仅针对当前展开的行进行操作。

<template slot-scope="{ row, $index }">
  <span v-if="!isExpanded($index)">
    ...
  </span>
  <div v-else>
    <!-- 展开内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    isExpanded(index) {
      return this.expandedRows.includes(this.tableData[index].id);
    }
  },
  computed: {
    expandedRows() {
      // 返回已展开的行的id列表
      return Object.keys(this.$store.state.expandedRows).map(key => Number(key));
    }
  }
}
</script>