el-select既能输入又能选择

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<el-select                 multiple                 filterable                 collapse-tags                 v-model="buildId"                 clearable                 remote                 :remote-method="searchBuildsClick"                 placeholder="请输入电站名称"                 @focus="searchBuildsClick"                 style="width: 255px; margin-left: 10px"               >                 <el-option v-if="optionsBuilds.length > 0" disabled>                   <el-checkbox                     v-model="checked"                     @change="selectAll"                     style="text-align: right; width: 100%; padding-right: 10px"                     >全 选</el-checkbox                   >                 </el-option>                 <el-option                   v-for="item in optionsBuilds"                   :key="item.buildId"                   :label="item.buildName"                   :value="item.buildId"                 >                 </el-option>               </el-select>

　　

 searchBuildsClick(value) {
      if (value instanceof Event) {
        value = "";
      }
      const [_province = "", _city = "", _area = ""] = this.optionsCity;

      this.$post(xxxxxx, {
        page: 1,
        size: 3000,
        provinceCode: _province,
        cityCode: _city,
        areaCode: _area,
        buildName: value || "",
      })
        .then((res) => {
          if (res.status == 1) {
            this.optionsBuilds = res.data.rows;
            let length = this.buildId.length;
            if (length < this.optionsBuilds.length) {
              this.checked = false;
            } else {
              try {
                let tempData = [];
                this.buildId.forEach((item, index) => {
                  let result = this.optionsBuilds.find(
                    (ele) => ele.buildId == item
                  );
                  if (!result) {
                    throw new Error("暂停");
                  } else {
                    tempData.push(result);
                  }
                });

                if (tempData.length >= this.buildId.length) {
                  this.checked = true;
                }
              } catch (err) {
                console.log("已跳出循环");
                this.checked = false;
              }
            }
          }
        })
        .catch((err) => {});
    },

?

1 2 3 4 5 6 7 8 9 10

selectAll() {      this.buildId = [];      if (this.checked) {        this.optionsBuilds.map((item) => {          this.buildId.push(item.buildId);        });      } else {        this.buildId = [];      }    },