zoukankan      html  css  js  c++  java
  • element添加人员判断不能重复添加(复选框禁用)

    好记性不如烂笔头,记录下。

    问题:向小组中添加两个账号后,又像该小组中添加一个账号,在小组添加页面上发现添加了三个

    需求:第二次添加账号时,不要默认把第一次加的账号,加进来(已经添加过的再次添加时候复选框不可选)

    利用selectable的返回值用来决定这一行的 CheckBox 是否可以勾选

    1、

     

    2、

    3、

    4、

    5、

     <el-table
            ref="multipleTable"
            :data="tableData"
            class="oneTabel"
            border
            :row-key="getRowKeys"
            @selection-change="handleSelectionChange"
            style="100%;">
            <el-table-column type="selection" width="50" :reserve-selection="true" :selectable="selectEnable"></el-table-column>
             <el-table-column prop="loginId"  label="登录ID"></el-table-column>
             <el-table-column prop="userName" label="用户名"></el-table-column>
             <el-table-column prop="mobile" label="手机"></el-table-column>
    </el-table>
    

      

    methods:{
       handleSelectionChange(val) {
            let temp = [];
            val.forEach((item) => {
                temp.push(item.id)
            })
            let cid = temp.join(',');
            this.cid = cid;
            this.tempData =val; 
            console.log( this.tempData, this.checkedData, this.againData, '三个不同数据')
            this.multipleSelection = val;
            console.log(this.multipleSelection, 'multipleSelection');
        },
        selectEnable(row, index) {
           if (this.againData.some(item => item.userName === row.userName)) {
                return false//复选框禁用
            } else {
                return true
            }
        }
    }
    

      

  • 相关阅读:
    hdu 5146 Sequence
    hdu 1232 畅通工程
    hdu 1213 How Many Tables
    hdu 2822 Dogs
    hdu 1242 Rescue
    hdu 5101 Select
    hdu 1873 看病要排队
    hdu 5112 A Curious Matt
    hdu 5154 Harry and Magical Computer
    hdu 1548 A strange lift
  • 原文地址:https://www.cnblogs.com/theblogs/p/13803943.html
Copyright © 2011-2022 走看看