vue远程搜索后端给的数据

这也是前端师傅帮我写的，因为过程中不像百度到的那么顺利，于是只能出一问题解决优化。现在还有一个问题就是调出来数据之后，如果没选中，就把内容删除，那么下面已经选过的数据就会变成id，还在解决问题。先把之前的记录一下吧~有解决方法的老铁们私信我呀

 先上一个最终效果图’

啊不行，涉及公司机密，上代码就行了

<el-table-column label="用户选择" align="center" width="150">

              <template slot-scope="{row}">

                <el-select

                  v-model="row.user_id"

                  size="small"

                  filterable

                  remote

                  reserve-keyword

                  clearable

                  :remote-method="remoteMethod"

                  :loading="loading"

                  controls-position="right"

                >

                  <el-option

                    :key="index"

                    :value="item.id"

                    :label="item.id_name"

                    v-for="(item,index) in user_options"

                  ></el-option>

                </el-select>

              </template>

            </el-table-column>

然后js部分，调用一个远程搜索

    // 当用户输入内容开始远程搜索模糊查询的时候，会触发remoteMethod方法

    remoteMethod(query) {

      var that = this;

      //  console.log(query)

      if (query !== '') {

        // 如果用户输入内容了，就发请求拿数据，远程搜索模糊查询

        this.loading = true; //开始拿数据

        // this.getUser_list(query);

        this.user_list = this.deptListFilter.filter(item => {

                return item.deptName.indexOf(query) > -1;

              });

      } else {

        that.user_options = [];

      }

    },

调用数据

 getUser_list(name) {

      var that = this;

      that.$store

        .dispatch('crud/request', {

          apiName: 'designers/names',

          method: 'get',

          query: {

            keywords: name

          }

        })

        .then(response => {

          that.user_list = response.data;

          console.log('that.user_list', that.user_list);

          setTimeout(() => {

            that.loading = false;

            var obj = {};

            this.user_options = this.user_options

              .concat(that.user_list) //拼接数组

              // 去重

              .reduce(function(item, next) {

                obj[next.id] ? '' : (obj[next.id] = true && item.push(next));

                return item;

              }, [])

              // 倒序，新搜索出来的排在最前

              .reverse();

          }, 200);

        });

    },