elementui的el-table自定义控制展开事件，实现“展开”“收起”的切换（两种效果）【超级完整式代码】

在Element UI的el-table组件中，可以通过row-class-name属性来自定义表格行的类名，然后通过CSS来控制行的展开和折叠样式。同时，可以监听expand-change事件来处理展开收起的逻辑。

以下是实现“展开”和“折叠”效果的示例代码：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    row-key="id"
    :expand-row-keys="expandRowKeys"
    @expand-change="handleExpandChange"
  >
    <!-- 其他列定义 -->
    <el-table-column type="expand">
      <template slot-scope="props">
        <!-- 这里放置扩展内容 -->
        <p>{{ props.row.description }}</p>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据源
      ],
      expandRowKeys: [] // 当前展开行的id数组
    };
  },
  methods: {
    handleExpandChange(row, expandedRows) {
      if (expandedRows.length) {
        this.expandRowKeys = [row.id]; // 只允许一行展开
      } else {
        this.expandRowKeys = []; // 关闭时清空
      }
    }
  }
};
</script>

在这个例子中，expandRowKeys数组用于控制哪些行是展开的。handleExpandChange方法会在展开或折叠行时被调用，并更新expandRowKeys以切换当前展开的行。通过设置row-key属性为表格数据的唯一键，可以确保表格的正确行为。