首页 > 其他分享 >el-select既能输入又能选择

el-select既能输入又能选择

时间:2022-09-27 18:00:13浏览次数:33  
标签:el checked buildId value item length optionsBuilds 既能 select

<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) => {});
    },
 selectAll() {
      this.buildId = [];
      if (this.checked) {
        this.optionsBuilds.map((item) => {
          this.buildId.push(item.buildId);
        });
      } else {
        this.buildId = [];
      }
    },

  

标签:el,checked,buildId,value,item,length,optionsBuilds,既能,select
From: https://www.cnblogs.com/hxy--Tina/p/16735426.html

相关文章

  • element ui 二次封装上传附件的组件
    因为elementui上传组件的代码很长,在项目中关于上传的代码过于冗余,因此我二次封装了一个上传附件的组件:项目中使用:1<!--附件-->2   <el-form-item......
  • C# Console.WriteLine()不在输出窗口显示内容
    以前调试代码的时候,用Console.Writeline(“xxxxx”)可以直接在VS的“输出”窗口显示要打印的东西,今天用VS2019跑代码的时候突然发现没有输出内容了,搞得我一脸懵逼。查了相......
  • 【elk】es限制内存
    https://www.jianshu.com/p/aa450daecec0  找到ES的安装目录,然后找到config文件夹,里面都是相关的配置文件。  其中,jvm.options可以修改es运行时候的内......
  • 使用hutool工具进行导入导出excel表格2
    username password nickname email张三 23 88.32 TRUE李四 33 59.50 FALSE自定义内容 第五行第二列 名字 张三 密码 23 昵称 88.32 电子邮件 true 效果......
  • el-input精度两位
     <el-input-numberv-model="scope.row.payAmtExpect"                :disabled="isUpdate"             ......
  • laravel-admin实现时间搓区间查询
    数据表时间字段使用的时间搓保存,使用查询过滤时发现时间区间查询没有关于时间搓查询的能力,只能是自己实现一个表格查询过滤的between类型,默认是使用控件输入原值作为查......
  • Java语言就是这么任性,既能写前端,也能写后端
    Java语言就是这么任性,既能写前端,也能写后端。Java总的来说算是后端开发程序语言。那么Java能不能用来做前端呢?当然是可以的。有这么几种方法可以用Java来做前端。一种......
  • Wallys//Industrial_Wireless_AP//network,card//QCN6024/QCN9074/QCN9024,WiFi,Card
    QCN9074WiFiCardIPQ6010,802.11ax,2x22.4G&5G,SupportOpenWRT//QCN9074802.11ax4x4MU-MIMO6GHzwifi6EQCN9074 11ax 4x46G M.2   1.DR9074-6E(PN02......
  • centos yum install mysql-devel报错解决办法
    报错如下:Loadedplugins:fastestmirror,langpacksLoadingmirrorspeedsfromcachedhostfile*base:mirrors.aliyun.com*extras:mirrors.aliyun.com*updat......
  • Pipeline 责任链
    publicclassMain{publicstaticvoidmain(String[]args){Pipelinep=newPipeline();p.addLast(newHandler1());p.addLast(new......