element-ui表格table中复选框只能选中一个

方式一

<el-table stripe v-loading="loading" :data="tableData.list" class="table-box-tab table_type_five" style="padding-left:15px;padding-right:15px;" :style="{'padding-right': this.paddingRight == false? '14px':'15px'}" @selection-change="handleSelectionChange" ref="multipleTable" @select="select">
  <el-table-column type="selection" width="40"></el-table-column>
</el-table>

methods 中

handleSelectionChange(e) {
      let bfTmpUserSelectArr = this.userSelectArr;// 上一次用户选择的数据
      this.userSelectArr = e;
      if (this.userSelectArr.length > 1) {
        if (bfTmpUserSelectArr.length == 1) {
          let del_row = this.userSelectArr.shift()
          this.$refs.multipleTable.toggleRowSelection(del_row, false)
        } else {
          this.$message({
            message: '一次只能操作一条',
            type: 'warning'
          });
          this.handleSelectionClear();
        }
        return
      }
      if (this.userSelectArr.length == 1 && this.userSelectArr[0].backStatus == 1) {
        this.$message({
          type: 'info',
          message: '无需'
        });
        this.handleSelectionClear();
        return
      }
    }

方式二

<el-table
          ref="multipleTable"
          :data="updatetableData"
          style="width: 100%"
          @selection-change="updatehandleSelectionChange"
          @select="select"
          @select-all="selectAll"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="精品名称"></el-table-column>
          <el-table-column prop="tag" label="排序">
            <template slot-scope="scope">
              <el-input v-model="scope.row.sort" />
            </template>
          </el-table-column>
        </el-table>

methods 中

select(selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
selectAll(selection){
      if (selection.length > 1) {
        selection.length = 1
      }
    }

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值