【Ant Design of Vue】【ant select】select动态加载(赋值)

更新时间:2021年6月18日

1.支持显示的内容进行搜索

直接上vue代码

export default {
     return {
        templateDatas:[] //接收下拉框数据的对象
    }
}
//created 初始加载
    created () {
      this.fetchTemplateData()
    },
//method 加载下拉框数据
 methods: {
      fetchTemplateData(){
        console.log('in method')
        let formData = "";
        let method = "get";
        let httpurl = this.url.dict;
        //这里是自定义的一个请求方法
        httpAction(httpurl,formData,method).then((res)=>{
          console.log(res)
            //这里根据自己接口返回进行判断 和循环赋值
            if(res.success){
              const result = res.result
              result.forEach((r)=>{
                this.templateDatas.push({
                  value:r.value,
                  text:r.text
                })
              })
            }
        })
      }
}
//httpAction
export function httpAction(url,parameter,method) {
  return axios({
    url: url,
    method:method ,
    data: parameter
  })
}

页面代码

 <a-select
            showSearch
            placeholder="请输入报告模板类型"
            v-decorator="['reportTemplate', validatorRules.reportTemplate]"
          >
          <a-select-option v-for="d in templateDatas" :key="d.value" :value="d.value">{{d.text}}</a-select-option>
          </a-select>

 页面操作演示图

页面代码-可以根据text搜索

 optionFilterProp="children"

https://www.antdv.com/components/select-cn/

optionFilterProp

搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索

<a-form-item label="日志接口类型">
  <a-select
    showSearch
    placeholder="请选择日志接口类型"
    optionFilterProp="children"
    v-model="queryParam.logType">
    <a-select-option v-for="d in templateDatas" :key="d.value" :value="d.value">
      {{d.text}}
    </a-select-option>
</a-select>

页面操作演示图-带搜索