vue2+elementui 表格中操作列不定个数按钮的折叠展开

在Vue 2和Element UI中，可以使用<el-table>组件来创建表格，并使用<el-table-column>的type="expand"属性来实现操作列的折叠展开功能。以下是一个简单的例子：

<template>
  <el-table :data="tableData" style="width: 100%">
    <!-- 其他列 -->
    <el-table-column type="expand">
      <template slot-scope="props">
        <!-- 这里可以根据props.row的内容展示更多的数据或操作按钮 -->
        <el-button v-for="(btn, index) in getOperationButtons(props.row)" :key="index" @click="handleButtonClick(btn.action, props.row)">
          {{ btn.text }}
        </el-button>
      </template>
    </el-table-column>
    <!-- 操作列 -->
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleExpandClick(scope.row)">展开</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据对象
      ],
    };
  },
  methods: {
    handleExpandClick(row) {
      // 通过toggleRowExpansion方法来折叠或者展开行
      this.$refs.table.toggleRowExpansion(row);
    },
    getOperationButtons(row) {
      // 根据row的内容返回不同的按钮数组
      // 例如：return [{ text: '按钮1', action: 'action1' }, ...];
    },
    handleButtonClick(action, row) {
      // 处理按钮点击事件
    },
  },
};
</script>

在这个例子中，我们定义了一个操作列，其中包含一个展开按钮。点击展开按钮时，会调用handleExpandClick方法，该方法使用toggleRowExpansion方法来切换相应行的展开状态。在<el-table-column type="expand">中，我们定义了折叠内容，并根据props.row动态渲染一系列按钮，每个按钮都关联了特定的行动和点击事件处理器。