element ui ---<el-table>表格里嵌套<el-select>下拉框单选互斥功能实现.

主要功能实现: 表格里嵌套下拉框并不少见,我这里主要实现效果是表格里多条数据共用一个下拉选项,并且每行选中之后,被选中项在下拉框里置灰不可再选中. 

主要代码如下:

当下拉项被选中时,触发下面的方法,遍历当前下拉项中符合当前选中项,然后置灰.当infoList 里属性值不包含当前被选中项则设置isCheck 为false 实现再次点击.

 // 处置项更改
    chargeItemChanged(val,obj){
      this.chargeItems.forEach(item=>{
        if(item.id == val){
          this.$set(obj,'deductionExecutionStepId',item.id);
          this.$set(obj,'chargeItemName',item.label);
          this.$set(item,'isCheck',true);
        }
      })
      let arr = this.ruleData.infoList.map(v=> v.deductionExecutionStepId).filter(k=>k!=null);
      this.chargeItems.forEach(v=>{
        if(arr.indexOf(v.id) == -1){
          this.$set(v,'isCheck',false)
        }
      })
    },

表格标签部分代码示例:

<el-table-column align="center" 
            prop="chargeItemName" 
            label="处置项" 
            width="300" 
            fixed="right"
            v-if="ruleData.useType  == '销售领用'">
            <template slot-scope="scope">
              <el-form-item
                v-else
                label=" "
                :prop="'infoList.' + scope.$index + '.chargeItemName'"
                :rules="rules.chargeItemName"
                label-width="0"
                class="costValue">
                <el-select   
                  v-model="scope.row.chargeItemName"
                  placeholder="请选择"
                  @change="chargeItemChanged($event,scope.row)">
                  <el-option
                    :disabled="item.isCheck"
                    v-for="item in chargeItems"
                    :key="item.id"
                    :label="item.label"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

this.ruleData.infoList 为表格列表渲染数组,this.chargeItems 为每行下拉框的下拉选项数组集合
数据格式示例如下:

this.ruleData.infoList = [
{
   amount:2,
   deductionExecutionStepId: "ZXJL2106240024",
   chargeItemCode: "2801000006"
   chargeItemName: "儿童电动牙刷"
}
];

this.chargeItems = [{
    isCheck:false,
    id:'ZXJL2106240024',
    label:'儿童电动牙刷',
    Code: "2801000006"
}
]