el-select 選擇器相關

笑魘輕輕發表於2020-12-09

有兩個Select 選擇器,前面一個下拉框選中的資料,是後面Select 選擇器的總資料。

 <el-select v-model="value1" multiple placeholder="請選擇">
        <el-option
          v-for="item in options"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>

      <!-- 新的下拉地址 -->
      <el-select
        v-if="newOptions.length > 0"
        v-model="value2"
        multiple
        placeholder="新的select"
      >
        <el-option
          v-for="item in newOptions"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        >
        </el-option>
      </el-select>
data() {
          return {
            options: [
              {
                id: 11,
                name: '我的11',
              },
              {
                id: 12,
                name: '我的12',
              },
              {
                id: 13,
                name: '我的13',
              },
              {
                id: 14,
                name: '我的14',
              },
              {
                id: 16,
                name: '我的16',
              },
            ],
            value1: [], // 下拉1
            value2: [], // 下拉2
            newOptions: [], // 新下拉陣列
          }
        }
        watch: {
          value1(e) {
            this.value2 = [] // 初始化新的下拉
            let newOptions = []
            for (let i = 0; i < this.options.length; i++) {
              if (e.indexOf(this.options[i].id) != -1) {
                newOptions.push(this.options[i])
              }
            }
            this.newOptions = newOptions
          },
        },

在這裡插入圖片描述
在這裡插入圖片描述

相關文章