【Ant Design of Vue】【ant select】select动态加载(赋值)
直接上vue代码export default {return {templateDatas:[] //接收下拉框数据的对象}}//created 初始加载created () {this.fetchTemplateData()},//method 加载下拉框数据methods: {fetch...
·
更新时间: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>
页面操作演示图-带搜索
更多推荐
已为社区贡献1条内容
所有评论(0)