在同一個頁面多次調用el-select選擇器

elementui是一個十分好用的組件庫，但畢竟也不能做到面面俱到，有些還是要根據根據自己的實際需求做一些自定義的方法。

比如el-select選擇器在同一個頁面使用多次的話就會造成選擇一個另一個也會跟着變化的情景，解決方法其實也很簡單，但還是弄不懂，其實就是把v-model及綁定的數據換一下就可以了，還是看着代碼比較明顯，下面一起看一下吧

<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代碼如上所示，寫了兩個選擇器，然后把里面的數據名稱等換了一下，再看一下data 中的return的值吧

data() {
    return {
      selectfloor:[
          {
          floorid:'1111',
          floorname:'魁拔'
      },{
          floorid:'1112',
          floorname:'海問香'
      },
      {
        floorid:'1113',
        floorname:'幽冥狂'
      },
      ],
      options: [
        {
          value: "選項1",
          label: "黃金糕"
        },
        {
          value: "選項2",
          label: "雙皮奶"
        },
        {
          value: "選項3",
          label: "蚵仔煎"
        },
        {
          value: "選項4",
          label: "龍須面"
        },
        {
          value: "選項5",
          label: "北京烤鴨"
        }
      ],
      value: "",
       }
    }

如果是自己的測試數據要注意不管是floorid還是value都不能相同，不過一般都是從后台取數據也不會有這個問題了，在上面的代碼插入到頁面中就能完美的實現在同一個頁面多次使用el-select選擇器了，圖示如下：

 

 

 

希望能夠對你有幫助，有問題的可以在下方留言，也不要吝嗇你的關注呦