【vue|前端设置下拉框与选择】后台返回json格式，前端设置下拉框或者选择
有些时候 前端需要动态的展示有后端传来的选项
例如下图中只有关联项目 + 采集时间是前端固定的 其他的都是有后端传来 咱们需要动态的渲染这个效果
文章图片
// 数据类型+数据名称是多选下拉的
const extraSelectOptionDictName: any[] = ['carriage', 'status'];
// 对应的是多选下拉的key值 有后端返回 这个可以先和后端商量好private async getFormOptions () {
const dictMap: Dict[] = await Fetch.get('/api/web_json/searching_dict', { params: { scan_type: this.type } });
if (dictMap.length) {
this.selectsOption = [];
const extraSelectOptionDictNameSet = new Set(extraSelectOptionDictName);
const containsToOptions = (contains: Dict[] | undefined) => {
if (!contains) {
return [];
}
const options = contains.map((contain: Dict) => {
return {
// eslint-disable-next-line spellcheck/spell-checker
label: contain.frontend,
value: contain.backend
};
});
return options;
};
const dictToFormOption = (dict: Dict) => {
return {
// eslint-disable-next-line spellcheck/spell-checker
label: dict.frontend,
prop: dict.backend,
options: containsToOptions(dict.contains)
};
};
(this.formOptions as Array) = dictMap
.map((item: Dict) => {
if (extraSelectOptionDictNameSet.has(item.backend)) { // 如果是多选下拉 则给selectsOption push
this.selectsOption.push(dictToFormOption(item));
return null;
}
this.$set(this.formModel, item.backend, ['']);
// 先默认都是全部
return dictToFormOption(item);
})
.filter(x => x);
}
}
推荐阅读
- vue|vue中引入字体包
- Vue|Vue-cli 脚手架一
- vue|vue 的4种实现动画方式
- 5-JS-数据类型-Iterable object （可迭代对象）
- Vue|Vue 组件化
- 前端框架|前端开发Vue项目实战（电商后台管理系统（一）前后端搭建）
- 前端|VUE3.0和VUE2.0语法上的不同
- #|Vue3.0 - Vue2.0和Vue3.0响应式原理对比
- vue|vue3.0新特性及与vue2.0的区别