element ui --- 表格里嵌套 下拉框單選互斥功能實現.

主要功能實現: 表格里嵌套下拉框並不少見,我這里主要實現效果是表格里多條數據共用一個下拉選項,並且每行選中之后,被選中項在下拉框里置灰不可再選中. 

主要代碼如下:

當下拉項被選中時,觸發下面的方法,遍歷當前下拉項中符合當前選中項,然后置灰.當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"
}
]