美文网首页
el-select 选择对象 value-key属性

el-select 选择对象 value-key属性

作者: jesse28 | 来源:发表于2022-06-14 11:39 被阅读0次

    引用:https://blog.csdn.net/wu_yans/article/details/107459565
    相当于el-select中的v-model要绑定一个对象。

      <!-- 指定分组start -->
            <div v-if="radiostatus=='指定分组'" style="margin-left:125px;">
              <div style="margin-bottom: 15px;" v-for="(v, index) in checkObjectArr" :key="index">
                <span style="margin-right:20px">分组{{index+1}}</span>
                <!-- 人员 -->
                人员
                <el-select @focus="handleGroupList" value-key="userId" filterable clearable multiple style="margin-right:20px" v-model="v.checkUserIdName" placeholder="请选择" class="select">
                  <el-option v-for="item in checkuserOptions" :key="item.userId" :label="item.userName" :value="item">
                  </el-option>
                </el-select>
                <!-- 对象 -->
                对象
                <el-select style="width:300px" value-key="objectId" @remove-tag="handleremoveTag" filterable  v-model="v.checkObjectIdName" multiple placeholder="请选择" class="select" @change="handleDisabled">
                  <el-option v-for="item in checkObjectOptions" :disabled="item.disabled" :key="item.objectId" :label="item.objectName" :value="item">
                  </el-option>
                </el-select>
                <!-- 删除一行-->
                <el-button style="margin-left:20px;" plain icon="el-icon-minus" @click="deleteItem(index)" type="danger" v-if="index !== 0"></el-button>
                <!-- 添加一行 -->
                <el-button style="margin-left:20px" @click="Addrule" type="primary" plain icon="el-icon-plus" v-if="index == 0"></el-button>
              </div>
            </div>
            <!-- 指定分组end -->
    
    data(){
    return {
      checkObjectArr: [
            {
              checkUserIdName: "",
              checkObjectIdName: "",
              isChange: "0",
            },
          ],
    }
    }
    
        //  加一行
        Addrule() {
          this.checkObjectArr.push({
            checkUserIdName: "",
            checkObjectIdName: "",
            isChange: "0",
          });
        },
       // 减一行
        deleteItem(index) {
           console.log('删除一行数组',JSON.parse(JSON.stringify(this.checkObjectArr)))
          console.log('删除一行',index)
          this.checkObjectArr[index].checkObjectIdName.forEach(item=>{
            this.checkObjectOptions.forEach(item1=>{
              if(item.objectId ==item1.objectId){
                item1.disabled = false
              }
            })
            
          })
          this.checkObjectArr.splice(index, 1);
        },
    

    三层循环

     if (this.radiostatus == "指定分组") {
            let objTotal = [];
            let obj = [];
            this.checkObjectArr.forEach((item) => {
              item.checkObjectIdName.forEach((item1) => {
                obj = item.checkUserIdName.map((item2) => {
                  return {
                    checkUserId: item2.userId,
                    checkUserName: item2.userName,
                    checkObjectId: item1.objectId,
                    checkObjectName: item1.objectName,
                    isChange: "0",
                    checkObjectStr: "",
                  };
                });
                objTotal.push(obj);
              }); //第二次循环
              console.log("objTotal", objTotal);
            }); //最外围循环
            console.log("解构", ...objTotal);
            console.log("解构合并", [].concat(...objTotal));
            this.checkObjectGroup = [].concat(...objTotal);
          }
    
    

    相关文章

      网友评论

          本文标题:el-select 选择对象 value-key属性

          本文链接:https://www.haomeiwen.com/subject/cvczmrtx.html