阅读数:73 评论数:0

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>