el-tabl 循环表格把按钮放到 columns里

在Element UI库中，`el-table`是一个用于创建交互式表格组件的强大工具。如果你想在循环生成的表格中将按钮添加到列(`columns`)里，你可以通过设置每个列(column)的对象结构，并在其中包含`render`属性，这个属性通常用于自定义单元格的内容渲染。

例如，假设你想在每行的最后一个单元格添加一个按钮，你可以这样做：

<template>
  <el-table :data="tableData">
    <el-table-column v-for="(column, index) in tableColumns" :key="index" :prop="column.prop">{{ column.label }}</el-table-column>
    <!-- 这里的`buttonColumn`是你想要添加按钮的列 -->
    <template slot-scope="scope">
      <!-- 使用v-if或索引来控制何时显示按钮 -->
      <el-button @click="handleButtonClick(scope.$index)" v-if="index === tableColumns.length - 1">点击操作</el-button>
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: ...,
      tableColumns: [
        { prop: 'name', label: 'Name' },
        { prop: 'age', label: 'Age' },
        // 其他列...
        // 最后一列添加了一个特殊的按钮列
        { prop: '', render: (h, params) => h('div', { domProps: { innerHTML: '<el-button>按钮</el-button>' } }) }
      ],
      handleButtonClick(index) {
        console.log('第', index, '行的按钮被点击了');
      }
    };
  }
};
</script>

在这个例子中，`tableColumns`数组定义了每列的配置，最后一列的`render`函数会插入一个按钮元素。`slot-scope`允许你在单元格内访问当前行的数据，`handleButtonClick`函数会在点击按钮时被触发。