526互联

解决el-select用了远程搜索后，下拉图标不显示问题。

发布时间 2023-09-20 10:06:41作者: 崛起崛起

参考文章：原文链接：https://blog.csdn.net/weixin_37342647/article/details/130607274
1.功能：下拉框可输入可多选可全选
2.问题：解决el-select用了远程搜索后，下拉图标不显示问题。
问题图片

修改后图片

原代码：





修改：


代码
结构：

<el-form-item label="电站名称">
            <el-select
              v-model="stationCode"
              multiple
              collapse-tags
              placeholder="请选择电站名称"
              filterable
              clearable
              remote
              :remote-method="searchBuild"
              @focus="searchBuild"
              @change="changeSelect"
              style="width: 175px"
              ref="my-select"
              @visible-change="reverseArrow"
            >
              <el-checkbox
                v-model="checkBuild"
                @change="selectAll"
                style="text-align: right; width: 100%; padding-right: 10px"
                >全 选</el-checkbox
              >
              <el-option
                v-for="item in buildList"
                :key="item.buildCode"
                :label="item.buildName"
                :value="item.buildCode"
              >
              </el-option>
            </el-select>
          </el-form-item>

方法：

   reverseArrow(flag) {
      let rulesDom = this.$refs["my-select"].$el.querySelector(
        ".el-input .el-input__suffix .el-input__suffix-inner .el-input__icon"
      ); // 找到dom
      if (flag) {
        rulesDom.classList.add("is-reverse"); // 对dom新增class
      } else {
        rulesDom.classList.remove("is-reverse"); // 对dom新增class
      }
    },
  //勾选电站
    changeSelect(val) {
      if (val.length === this.buildList.length) {
        this.checkBuild = true;
      } else {
        this.checkBuild = false;
      }
    },
    // 全选电站
    selectAll() {
      if (this.checkBuild && this.buildList.length > 0) {
        if (this.stationName) {
          this.stationCode = this.sameNameArr.map((item) => item.buildCode);
        } else {
          this.stationCode = this.buildList.map((item) => item.buildCode);
        }
      } else {
        this.stationCode = [];
      }
    },
    // 获取电站列表
    searchBuild(value) {
      console.log(value, "value");
      if (value instanceof Event) {
        value = "";
      }
      if (value) {
        this.getSameBuildName(value);
      } else {
        this.getAllBuild();
      }
    },

    getAllBuild() {
      const requestData = {
        page: 1,
        size: 3000,
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        buildName: "",
      };
      this.$post(selectBuildByUser, requestData).then((res) => {
        console.log(res);
        if (res.status === 1) {
          this.buildList = res.data.rows || [];
          this.stationCode = this.stationCode.filter((station) => {
            return this.buildList.some((build) => build.buildCode === station);
          });
        }

        const allLength = this.buildList.length;
        const length = this.stationCode.length;
        if (allLength > 0 && length > 0 && allLength == length) {
          this.checkBuild = true;
        } else {
          this.checkBuild = false;
        }
      });
    },
    getSameBuildName(value) {
      const requestData = {
        page: 1,
        size: 3000,
        provinceCode: "",
        cityCode: "",
        areaCode: "",
        buildName: value || "",
      };

      this.$post(selectBuildByUser, requestData).then((res) => {
        console.log(res);
        if (res.status === 1) {
          this.sameNameArr = res.data.rows || [];
          this.buildList = res.data.rows || [];
        }
      });
    },