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>
相关推荐
浩星15 小时前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui
技术钱15 小时前
element plus 多个form校验
前端
xrkhy15 小时前
ElmentUI之DateTimePicker 日期时间选择器
elementui
yume_sibai15 小时前
HTML HTML基础(3)
前端·html
米花丶16 小时前
JSBridge安全通信:iOS/Android桥对象差异与最佳实践
前端·webview
萌萌哒草头将军16 小时前
🚀🚀🚀 Oxc 恶意扩展警告;Rolldown 放弃 CJS 支持;Vite 发布两个漏洞补丁版本;Rslib v0.13 支持 ts-go
前端·javascript·vue.js
接着奏乐接着舞。16 小时前
3D地球可视化教程 - 第1篇:基础地球渲染系统
前端·javascript·vue.js·3d·three.js
龙傲天66616 小时前
Scala的面向对象和函数式编程特性 Idea环境搭建和输入输出
前端
蓝色海岛16 小时前
element-ui表格嵌套表格,鼠标移入时样式错乱-问题调研及处理办法
前端
薄雾晚晴16 小时前
Rspack 实战:用 SWC Loader 搞定 JS 兼容(支持 IE 11 + 现代浏览器,兼顾构建速度)
前端·vue.js