Avue 基于element-ui实现远程搜索输入框 V2.8.0及以上

阅读数:135 评论数:0

跳转到新版页面

分类

html/css/js

正文

1、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
    }
  ],
}

2、在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>

3、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>
     




相关推荐

Avue是基于element-ui库进行的二次封装,简化一些繁琐的操作,核心理念为数据驱动视图,主要的组件库针对table表格和form表单场景。 <a href="https:/

一、去掉或修改横线颜色 .twj-table td, .twj-table ::v-deep th.is-leaf { border-bottom: 1px solid #cadcff; } 二、

一、问题描述 点击清空按钮clearable之后,如果输入框已经是聚集状态,再次输入时建议框不显示。 原因: 组件在执行清除事件时,将activat

// 可以在方法中通过下面的方式调整column显示 this.option.column &nb