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

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表格 设置只能勾选一个

上一篇:Jmeter之断言处理


下一篇:使用vault pki engine 方便的管理证书