IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> Avue 远程搜索输入框,联动赋值 v2.8.0及以上 -> 正文阅读

[JavaScript知识库]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、如果你有疑问或者有更好的实现方法请留言,交流学习

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-10-12 23:20:30  更:2021-10-12 23:21:15 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 23:55:05-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码