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>
相关推荐
前端小巷子26 分钟前
Web开发中的文件上传
前端·javascript·面试
翻滚吧键盘1 小时前
{{ }}和v-on:click
前端·vue.js
上单带刀不带妹1 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
杨进军2 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
ModyQyW2 小时前
用 AI 驱动 wot-design-uni 开发小程序
前端·uni-app
说码解字2 小时前
Kotlin lazy 委托的底层实现原理
前端
Q_970956392 小时前
java+vue+SpringBoo校园失物招领网站(程序+数据库+报告+部署教程+答辩指导)
java·数据库·vue.js
爱分享的程序员3 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js
翻滚吧键盘3 小时前
vue 条件渲染(v-if v-else-if v-else v-show)
前端·javascript·vue.js
vim怎么退出3 小时前
万字长文带你了解微前端架构
前端·微服务·前端框架