element-ui 远程搜索组件el-select在项目中代码实现

2023-01-19 10:16:37

element-ui 远程搜索组件el-select在项目中代码实现

一、功能展示

1、当没有搜索条件时搜索显示全部

在这里插入图片描述

2、当有搜搜条件时模糊查询符合的数据

在这里插入图片描述

二、代码实现

1、先引入select组件的代码

(页面代码)

<template>
  <el-row>
    <el-select
        v-model="selectKey"   
        :multiple="false"
        :filterable="true"
        :remote="true"            
        @focus="selectFocus"
        :clearable="true"
        placeholder="请选择企业"
        :remote-method="remoteMethod"
        :loading="selectLoading">
      <el-option
          v-for="index in options"
          :key="index.id"
          :label="index.enterpriseName"
          :value="index.id">
      </el-option>
    </el-select>
    <br>
    <br>
    <el-button @click="open" type="primary">点击查看key,value</el-button>
  </el-row>
</template>

注意:v-for循环生成下拉选择框的数据:key和value得换成自己从数据库查到所要展示的数据

      <!--   key,value,label,换成自己的   -->
	  <el-option
          v-for="index in options"
          :key="index.id"
          :label="index.enterpriseName"
          :value="index.id">
      </el-option>

(script)

<script>

export default {

  data () {
    return {
      key:"id",   //key
      value:"enterpriseName",  //value
      options: [],   //存储下拉框的数据
      selectKey:"",   //绑定的所选择的key
      selectUrl:"/v1/statistics/selectEnterprise",    //获取数据的请求地址
      selectEnterpriseForm:{
        enterpriseName:"",
      },
      selectLoading: false,
    }
  },
  mounted() {
    console.log("mounted")
  },
  methods: {
    selectEnterprise: function(query){    //query用户搜索的值
      this.selectEnterpriseForm=this.$options.data().selectEnterpriseForm;   //清空数据
      this.selectEnterpriseForm.enterpriseName=query;
      this.axios({
        method: "POST",
        url: this.selectUrl,
        data:this.$data.selectEnterpriseForm,
      }).then((res) => {
        let code = res.data.code;
        if (code == 200) {
          this.options=[];
          this.selectLoading=false;
          this.addLoading=false;
          for (let i = 0; i < res.data.data.length; i++) {
            this.options.push({[this.value]:res.data.data[i][this.value],[this.key]:res.data.data[i][this.key]});
          }
        }
      }).catch((error) => {
        console.log(error);
      });
    },
    remoteMethod(query) {
      this.selectLoading=true;
      this.selectEnterprise(query);
    },
    selectFocus:function (){
      this.options=[];
      this.selectLoading=true;
      this.selectEnterprise("");
    },
    open:function(){
      alert("s所选id为:"+this.selectKey)
    }
  }
}
</script>

2、data ()变量详细说明:可根据自己的需求更改变量的值

  1. 首先更改自己所要远程搜搜的接口:url

  2. 设置从数据库查询出的数据:分别设置key,和value,以便于赋值操作-----(key一般来说是id,value一般来说就是名称类的)

  3. selectEnterpriseForm,这个是远程搜索的表单,里面存储了远程搜索的值,用了表单的传递方式给后端传输模糊查询的数据

    	  key:"id",   //key
          value:"enterpriseName",  //value
          options: [],   //存储下拉框的数据
          selectKey:"",   //绑定的所选择的key
          selectUrl:"/v1/statistics/selectEnterprise",    //获取数据的请求地址
          selectEnterpriseForm:{
            enterpriseName:"",   //远程搜索的值
          },
          selectLoading: false,   //搜索数据时的一个渲染,显示加载中,
        }
    

3、methods方法说明:

  1. selectEnterprise: function(query){       //远程搜索获取数据
    	//获取远程搜索的数据
    }  
    

    用户每次从搜索宽输入值时,当光标停下时就会调用它,query为用户输入的值

  2. remoteMethod(query) {
          this.selectLoading=true;
          this.selectEnterprise(query);
    }
    

    用户在输入框输入查询数据时,会调用

  3. selectFocus:function (){
          this.options=[];
          this.selectLoading=true;
          this.selectEnterprise("");
    }
    

    获得焦点时触发函数,获得焦点时没有输入任何搜索值,所以查询全部数据,这一步可以不查,根据自己得需求来

----------->完工

  • 作者:·~简单就好
  • 原文链接:https://blog.csdn.net/qq_45830276/article/details/125922029
    更新时间:2023-01-19 10:16:37