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>
相关推荐
daols881 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇1 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊1 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习2 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖3 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖3 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水3 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐3 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06273 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台4 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue