Solution to default parameter passing and custom parameter passing of element UI component

Solution to default parameter passing and custom parameter passing of element UI component

The following code

        <div v-for="(item,index) in object.cooperationDepartmentNumber">
          <div class="entrustingPartyList">
            <el-row>
              <el-col :span="12"> 
                <el-form-item label="Co Organizer">
                <el-autocomplete
                  class="inline-input"
                  v-model="object.cooperationDepartment.otherArray[index].unit"
                  :fetch-suggestions="unitQuerySearch"
                  placeholder="Please enter co Organizer"
                  :trigger-on-focus="false"
                  @select="unitHandleSelect"
                ></el-autocomplete>
                </el-form-item>
              </el-col>
              <el-col :span="12"> 
                <el-form-item label="Co operative Department" v-show="interior">
                  <el-input v-model="object.cooperationDepartment.otherArray[index].cooperation" placeholder="Co operative Department"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12"> 
                <el-form-item label="Contact person of CO Organizer" v-show="external">
                  <el-input v-model="object.cooperationDepartment.otherArray[index].cooperation" placeholder="Co operative Department"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

When we have many same components in v-for, we need to know which component is selected. Then we definitely want to know the corresponding [index], and you will think that [item] is the default value

	  <el-col :span="12"> 
	    <el-form-item label="Co Organizer">
	    <el-autocomplete
	      class="inline-input"
	      v-model="object.cooperationDepartment.otherArray[index].unit"
	      :fetch-suggestions="unitQuerySearch"
	      placeholder="Please enter co Organizer"
	      :trigger-on-focus="false"
	      @select="unitHandleSelect(item, index)"
	    ></el-autocomplete>
	    </el-form-item>
	  </el-col>

The solution is to write a closure so that the index represents your first few components

	  <el-col :span="12"> 
	    <el-form-item label="Co Organizer">
	    <el-autocomplete
	      class="inline-input"
	      v-model="object.cooperationDepartment.otherArray[index].unit"
	      :fetch-suggestions="unitQuerySearch"
	      placeholder="Please enter co Organizer"
	      :trigger-on-focus="false"
	      @select="((item)=>{unitHandleSelect(item, index)})"
	    ></el-autocomplete>
	    </el-form-item>
	  </el-col>

In this way, when you call this method, you can know that it corresponds to the first component, and then you can operate on that component.

Posted by NixNod on Fri, 29 Nov 2019 09:27:58 -0800