Avue 远程搜索输入框，联动赋值其他组件 v2.7.10及以下

Avue版本:v2.7.10及以下适用本文，v2.8.0及以上版本点这里

---

《 Avue 远程搜索输入框，联动赋值》

效果图：

前言

在很多情况下需要联动赋值给输入框，本文基于avue框架分别从avue与element-ui两方面进行远程搜索输入框联动赋值给其他输入框。

• 需求
  • 1、后台接受模糊查询参数，从 编码 字段的输入值进行后台模糊匹配并返回json数据。（接口已经实现，传值调用即可）
  • 2、根据 编码 的选择，将数据行自带的值匹配到 描述1 、描述2中。

---

提示：以下是本篇文章正文内容，下面案例可供参考；
本文是基于对avue基本的表单结构熟悉后进行的操作，基础步骤不详的，可联系作者交流学习。

一、基于avue自带属性实现（效果差）

示例：avue 是基于element-ui封装的一种工具，该工具是为了解决数据表单任务而创建的。

Option属性

export const tableOption = {
  "border": true,
  "index": true,
  "indexLabel": "序号",
  "stripe": true,
  "menuAlign": "center",
  "align": "center",
  "searchMenuSpan": 6,
  "searchslot": true,
  "selection":true,
  "column": [
    {
      "type": "select",
      "label": "编码",
      "prop": "Number",
      "remote": true,  //开启远程访问
      "dicFlag":false,  //初次获得焦点不下拉
      "dicUrl": "/admin/version/vp?num={{key}}",  //key为当前输入值
      "props": {   //下拉列表的选项值，对应编码
        lable: 'Part',
        value: 'Part',
      },
      "cascaderItem": ['desc1', 'desc2'],  //联动两个属性
      "search": true,    //远程搜索
      "span": 12,
    }, {
      "type": "input",
      "label": "描述1",
      "prop": "desc1",
      "dicFlag":false,
      "dicUrl": "/admin/version/vp?num={{Number}}",  //联动时 获取productNumber的值
      "props": {     //描述1
        lable: 'Desc1',
        value: 'Desc1',
      },
      "cascaderIndex": 0,  //默认联动
      "span": 12,
    }, {
      "type": "input",
      "label": "描述2",
      "prop": "desc2",
      "dicFlag":false,
      "dicUrl": "/admin/craftversion/vp?num={{Number}}", //联动时 获取productNumber的值
      "props": {  //描述2
        lable: 'Desc2',
        value: 'Desc2',
      },
      "cascaderIndex": 0,
      "span": 12,
    }, {
      "type": "input",
      "label": "版本",
      "prop": "Verion",
      "span": 12
    }
  ],
}

基于avue属性方法的效果如下：

在联动描述1、描述2 输入框时，存在明显卡顿（GIF经过加速，卡顿可能不明显）

二、基于element-ui实现（效果好）

Option属性

export const tableOption = {
  "border": true,
  "index": true,
  "indexLabel": "序号",
  "stripe": true,
  "menuAlign": "center",
  "align": "center",
  "searchMenuSpan": 6,
  "searchslot": true,
  "selection":true,
  "column": [
    {
      "type": "select",
      "label":"编码",
      "prop": "Number",
      "formslot":true,   //开启自定义插槽，引入element-ui
      "search": true,    //设置搜索项
      "span": 12,
    }, {
      "type": "input",
      "label": "描述1",
      "prop": "desc1",
      "span": 12,
    }, {
      "type": "input",
      "label": "描述2",
      "prop": "desc2",
      "span": 12,
    }, {
      "type": "input",
      "label": "版本",
      "prop": "Verion",
      "span": 12
    }
  ],
}

---

index.vue中在 avue-crud 组件中添加自定义插槽

 <template slot-scope="scope" slot="NumberForm">
          <el-autocomplete
            v-model="scope.row.Number"
            :trigger-on-focus="false"   
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            @select="handleSelect($event,scope.row)">
          el-autocomplete>
template>

---

index.vue中的 methods对象中的方法

      //远程搜索
      querySearchAsync(queryString, cb) {
        let res = []   //定义数组，存储暂时的下拉数据
        queryNum(queryString).then(response =>{   //queryNum 为定义的路由方法
          response.data.data.forEach(item=>{
            res.push({
              value:item.Part,
              desc1:item.Desc1,
              desc2:item.Desc2
            })
          })
          cb(res)  //数据返回，value为下拉可见项
        }).catch(e =>{
          this.$message.error("请检查网络")
        })
      },
      
      //选择下拉项时
      handleSelect(item,row) {
        //为描述1、描述2 联动赋值
        row.desc1 = item.desc1,
          row.desc2 = item.desc2
      },

---

路由中添加的方法（接口后端已写好，前端只是调用，本文不讨论后端实现）

export function queryNum(num) {
  return request({
    url: '/admin/version/vp/',   //后台监听的路径，模糊匹配返回
    method: 'get',   //get请求
    params: {
      "num":num    //监听的属性值
      }
  })
}

element-ui 方法效果如下：

在联动描述1、描述2 输入框时，几乎同步联动。

总结

1、element-ui方法效果最好，只发送一次请求，响应快；
2、avue属性方法每联动一次就需要发生一次请求，导致响应慢。
3、avue属性方法较简单，适合测试接口使用。
4、element-ui方法简单，适合实际开发使用，适合开发者了解其运行原理，提升开发思维。
5、如果你有疑问或者有更好的实现方法请留言，交流学习