Vue设置selection选择框条件不可选

  • Post author:
  • Post category:vue


记录一下应用场景:当添加的内容属于暂存数据时,再次选择时需要把已添加的数据设置为不可选,避免上传时数据重复



HTML

在selection组件中添加:selectable属性

<el-table-column :selectable="checkSelectMember" 
				 type="selection" width="55" align="center"/>



方法区

在方法中做数据对比,若外部数据与本行数据相同时,设置isChecked = false不可选,否则就返回true可选

这里的memberList指外部暂存数据集合,row指每一行可添加数据

	  /**
       * 设置多选框已有人员不可选
       * row:当前行数据
       * index:当前第几位
       */
      checkSelectMember(row, index) {
        let isChecked = true
        this.memberList.forEach(member => {
          if (member.employeeName === row.nickName) {
            isChecked = false
          }
        })
        return isChecked
      },



效果图

第一次添加完数据:

在这里插入图片描述

在这里插入图片描述

再次点添加时已有数据不可选:

在这里插入图片描述


记录就到这里,有不清楚的欢迎到评论区留言~



版权声明:本文为weixin_49141728原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。