elementUI表格复选框只能选中一个

<el-table
     :data="sarAccessListDatas"
     tooltip-effect="dark"
     style="width: 100%"
     border
     height="100%"
     :header-cell-style="{
      background: '#f5f1f1',
      color: '#333333', 
      fontSize: '16px',
      fontWeight: 'bold', 
      height: '48px'}"
     @row-click="rowClick"
     @select="select"
     @selection-change="selectListChange"
     ref="detailedSelection"
   >
   <el-table>

<el-table-column 
:selectable="selectEnableCeshi"  
type="selection" 
min-width="10%">
</el-table-column>
<script>
    data(){
     return(){
        bill_id:""
     }
    },
    methods:{
//方法一
    // 表格某一行的单击事件
    rowClick(row, column) {
    const selectData = this.selectList
    this.$refs.detailedSelection.clearSelection()
    if( selectData.length === 1 ) {
      selectData.forEach(item => {
       // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
       if (item === row) {
        this.$refs.detailedSelection.toggleRowSelection(row, false);
       }
      // 不然就让当前的一行勾选
       else {
        this.$refs.detailedSelection.toggleRowSelection(row, true);
          }
         })
       }
      else {
        this.$refs.detailedSelection.toggleRowSelection(row, true);
       }
    },
//方法一
    select(selection, row) {
      // 清除 所有勾选项
      this.$refs.detailedSelection.clearSelection()
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if(selection.length === 0) return
      this.$refs.detailedSelection.toggleRowSelection(row, true)
   },
//方法一
//选择清单选择框改变
    selectListChange(data) {
      this.selectedList = [];
      for (let i = 0; i < data.length; i++) {
        this.selectedList.push(data[0]);
      }
    },


========================================================================================
    //方法二
    //selectEnableCeshi(row) {
        //console.log(row);
        //if (this.radioSelectCeshi == true) {
         // return false;
        //} else {
         // return true;
        //}
    // },
    select(selection, row){
         this.bill_id = row.id;
         // 清除 所有勾选项
         this.$refs.multipleTable.clearSelection()
         // 当表格数据都没有被勾选的时候 就返回
         // 主要用于将当前勾选的表格状态清除
         if(selection.length == 0) return 
         this.$refs.multipleTable.toggleRowSelection(row, true);

    },
 
   }

</script>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值