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

注意:

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

html 复制代码
<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>
相关推荐
mCell16 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip16 小时前
Node.js 子进程:child_process
前端·javascript
excel19 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel20 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼21 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping21 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript