vue elementui表格按钮状态单独控制

注意：

使用了Element UI的el-table和el-table-column组件展示表格；
通过template插槽来自定义操作列的内容；
每个按钮的状态是通过绑定到数据项的buttonType和buttonText属性来控制的；
当按钮被点击时，handleClick方法会被调用，并更新对应行的按钮状态；
这样就可以实现表格按钮状态的独立控制。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" width="180">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="180">
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            size="mini"
            :type="scope.row.buttonType"
            @click="handleClick(scope.$index, scope.row)">{{scope.row.buttonText}}</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        buttonType: 'primary',
        buttonText: '确认'
      }, {
        date: '2016-05-04',
        name: '李小虎',
        buttonType: 'info',
        buttonText: '查看'
      }, {
        date: '2016-05-01',
        name: '赵小虎',
        buttonType: 'success',
        buttonText: '编辑'
      }, {
        date: '2016-05-03',
        name: '孙小虎',
        buttonType: 'danger',
        buttonText: '删除'
      }]
    }
  },
  methods: {
    handleClick(index, row) {
      console.log('Clicked button at index:', index)
      // 这里可以根据业务需求来控制按钮的状态变化
      // 例如：改变按钮的 type 和 text
      row.buttonType = 'warning'
      row.buttonText = '等待'
      // 更新 tableData 以反映变化
      this.tableData.splice(index, 1, row)
    }
  }
}
</script>