前端设置下拉框与选择
后台返回json格式,前端设置下拉框或者选择<el-form-itemv-for="item in selectsOption":key="item.prop":label="item.label":prop="item.prop"><multiple-selectv-model="formModel[item.prop]":option
·
后台返回json格式,前端设置下拉框或者选择
有些时候 前端需要动态的展示有后端传来的选项
例如下图中只有关联项目 + 采集时间是前端固定的 其他的都是有后端传来 咱们需要动态的渲染这个效果
// 数据类型+数据名称是多选下拉的
<el-form-item
v-for="item in selectsOption"
:key="item.prop"
:label="item.label"
:prop="item.prop"
>
<multiple-select
v-model="formModel[item.prop]"
:options="item.options"
placeholder="默认为全部"
/>
</el-form-item>
<div
v-if="formOptions.length"
class="formOptionsContainer"
>
<el-row
v-for="item in formOptions"
v-show="formDetailVisible"
:key="item.prop"
>
<el-form-item
:label="item.label"
:prop="item.prop"
>
<checkbox-button-with-all
v-model="formModel[item.prop]"
:options="item.options"
/>
</el-form-item>
</el-row>
</div>
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<FormOptionModel | null>) = 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);
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)