In the same page calls el-select multiple selectors

elementui is a very useful component library, but after all, can not do everything, and some still have to do some custom methods according to their actual needs based.

For example, el-select a page selector to use the same words many times will result in a selection will be followed by another change of scene, the solution is actually very simple, but still do not understand, in fact, the v-model and binding a change of data on it, or look at the code more obvious, look at it with the following

<div class="skucost-top">
      <div class="skucost-top-first">
        <span>城市</span>
        <el-select v-model="selectfloor.floorname" placeholder="请选择">
          <el-option
            v-for="item in selectfloor"
            :key="item.floorid"
            :label="item.floorname"
            :value="item.floorid"
          ></el-option>
        </el-select>
      </div>
      <div class="skucost-top-first">
        <span>机构名称</span>
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div> 
    </div>

html code as shown above, two write selector and the name of the data inside the like for a moment, look at the value of the data in return it

Data () {
     return { 
      selectfloor: [ 
          { 
          floorid: ' 1111 ' , 
          floorname: ' Quebec pull ' 
      }, { 
          floorid: ' 1112 ' , 
          floorname: ' sea Q. Xiang ' 
      }, 
      { 
        floorid: ' 1113 ' , 
        floorname: ' Nether mad ' 
      }, 
      ], 
      options: [ 
        { 
          value: " option 1 ", 
          Label: " Golden cake " 
        }, 
        { 
          value: " Option 2 " , 
          label: " Shuangpinai " 
        }, 
        { 
          value: " option. 3 " , 
          label: " omelet " 
        }, 
        { 
          value: " Option 4 " , 
          label: " Longxumian " 
        }, 
        { 
          value: "Option 5 " ,
          label: " Beijing duck " 
        } 
      ], 
      value: "" , 
       } 
    }

If it is their test data to note whether floorid or value can not be the same, but these are generally taken from the back-end data would not be this problem, in the above code into the page will be able to achieve perfection on the same page el-select multiple use of the selector, illustrated as follows:

 

 

 

We hope to be able to help you with problems you can leave a comment below, and do not mean your attention Yo