首页 > 其他 > 详细

vue ele table表格 设置只能勾选一个

时间:2021-07-20 19:30:25      阅读:22      评论:0      收藏:0      [点我收藏+]

table 更改属性设置:

<el-table
ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" 
      @select="select" @row-click="rowClick"
      @selection-change="handleSelectionChange"
      stripe >
</el-table>
 
methods : 
rowClick(row, column) {
      const selectData = this.selectData;
      this.$refs.multipleTable.clearSelection();
      if (selectData.length == 1) {
        selectData.forEach((item) => {
          // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
          if (item == row) {
            this.$refs.multipleTable.toggleRowSelection(row, false);
          }
          // 不然就让当前的一行勾选
          else {
            this.$refs.multipleTable.toggleRowSelection(row, true);
          }
        });
      } else {
        this.$refs.multipleTable.toggleRowSelection(row, true);
      }
    },
 
async select(selection, row) {
      await this.$refs.multipleTable.clearSelection(); // 执行完清空操作在进行下面的勾选
      if (selection.length === 0) return;
      this.$refs.multipleTable.toggleRowSelection(row, true);
    },
 
handleSelectionChange(val) {
      this.selectData = val; //表格选中数据接收
    },
 
 

vue ele table表格 设置只能勾选一个

原文:https://www.cnblogs.com/majiayin/p/15036276.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!