Avue 远程搜索输入框,联动赋值 v2.8.0及以上

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


《 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    //监听的属性值
      }
  })
}

element-ui 方法效果如下:
在这里插入图片描述
在联动描述1、描述2 输入框时,几乎同步联动。


总结

1、element-ui方法效果最好,只发送一次请求,响应快;
2、element-ui方法简单,适合实际开发使用,适合开发者了解其运行原理,提升开发思维。
3、如果你有疑问或者有更好的实现方法请留言,交流学习

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值