基于 vue + element-ui 表格多选禁用按钮

最新推荐文章于 2024-02-23 15:04:39 发布

泋尐

最新推荐文章于 2024-02-23 15:04:39 发布

阅读量904

点赞数

文章标签： vue.js ui javascript

本文链接：https://blog.csdn.net/weixin_52588611/article/details/129851172

版权

我在做项目时有这样一个需求：table未勾选数据时按钮是禁用状态，勾选时按钮禁用状态解除

具体效果如下图：

表格里的禁选状态可根据数据状态进行判断

代码：

<template>
  <div class="app-container">
    <el-button type="success" size="mini" :disabled="selected.length == 0">通过</el-button>
    <el-button type="warning" size="mini" :disabled="selected.length == 0">拒绝</el-button>
    <el-table :data="tableData" border @select-all="selectAll" @select="selectCheck"
        @selection-change="tableSelectionChange">
        <el-table-column type="selection" :selectable="getselected"  width="55px" align="center"></el-table-column>
        <el-table-column label="日期" prop="date" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="姓名" prop="name" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="地址" prop="address" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="状态" prop="status" align="center" show-overflow-tooltip></el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
data() {
  return {
    //table勾选存放用户
    selectIndex: [],
    // 按钮禁选状态
      selected: [],
      // 表格
      tableData: [
      {
            userId:1,
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            status:'待审核'
          }, {
            userId:2,
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            status:'通过'
          }, {
            userId:3,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            status:'拒绝'
          }, {
            userId:4,
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            status:'待审核'
          }
      ],
  }
},
methods: {
    // 表格是否可选
    getselected(row, index) {
      if (row.status == '待审核') {
        return true
      } else {
        return false;
      }
    },
    // 控制按钮的禁选状态
    tableSelectionChange(val) {
      this.selected = val;
    },
    //全选触发
    selectAll(selection) {
      if (selection.length != 0) {
        for (let i = 0; i < selection.length; i++) {
          // 把选中的列userId存到selectIndex中，传到后台
          this.selectIndex[i] = selection[i].userId;
        }
      } else {
        this.selectIndex = [];
      }
    },
    //选中触发
    selectCheck(selection, row) {
      for (var i = 0; i < this.selectIndex.length + 1; i++) {
        if (this.selectIndex.length < selection.length) {
          this.selectIndex[this.selectIndex.length] = row.userId;
          break;
        } else if (this.selectIndex.length > selection.length) {
          if (this.selectIndex[i] == row.userId) {
            this.selectIndex.splice(i, 1);
            break;
          }
        }
      }
    },
  },
}
</script>

<style>

</style>