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

效果图：
在这里插入图片描述

前言

avue在更新到 v2.8.0 版本之后，优化了卡槽逻辑性能，对slot、formslot、typeslot、headerslot、labelslot、errorslot等卡槽进行了调整。所以之前版本的代码已经不适用。需要对代码进行数据调整。

一、基于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",
      "search": true,    //设置搜索项
      "span": 12,
    }, {
      "type": "input",
      "label": "描述1",
      "prop": "desc1",
      "span": 12,
    }, {
      "type": "input",
      "label": "描述2",
      "prop": "desc2",
      "span": 12,
    }, {
      "type": "input",
      "label": "版本",
      "prop": "craftVerion",
      "span": 12
    }
  ],
}

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

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

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


<script>
export default {
 name:"test",
 data() {
      return {
        formData:{}
         }
       },
 methods:{
   //远程搜索
      querySearchAsync(queryString, cb) {
        let res = []   //定义数组，存储暂时的下拉数据
        queryNum(queryString).then(response =>{   //queryNum 为定义的路由方法
          response.data.data.forEach(item=>{
            res.push({
              value:item.Id,
              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
      },
     }
 }
</script>

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

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