form表单一个给后台的值对应前端很多下拉选择框
程序员文章站
2022-06-13 21:04:28
...
自己封装一个组件
<template>
<div class="">
<basic-select
v-for="(item,index) in selectRuleIdArray"
:key="index"
v-model="selectRuleIdArray[index]"
allow-create
filterable
default-first-option
:options="options"
placeholder="请选择"
@change="selectChange"
/>
</div>
</template>
<script lang='ts'>
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
import BasicSelect, { Option } from '@/components/form/BasicSelect.vue';
@Component({
components: {
BasicSelect
}
})
export default class MultiSelect extends Vue {
@Prop(Array)
private options !: Option[]; // 传来的选项。
@Prop(String)
private value !: ''; // 选择的字符串
private count = 4; // 初始化4
private selectRuleIdArray: string[]=[]; // 匹配规则
private get bindSelectValue (): string[] {
return this.value ? this.value.split(',') : [];
}
private mounted () {
this.selectRuleIdArray = this.bindSelectValue.length ? this.bindSelectValue : new Array(this.count).fill(null).map((_, i) => {
return '';
});
}
public addSelect () {
if (this.selectRuleIdArray.length >= this.options.length) {
return false;
}
this.$set(this.selectRuleIdArray, this.selectRuleIdArray.length, '');
}
public subSelect () {
if (this.selectRuleIdArray.length <= 1) {
return false;
}
this.$delete(this.selectRuleIdArray, this.selectRuleIdArray.length - 1);
}
private selectChange (val: string) {
this.$emit('update:value', this.selectRuleIdArray.filter(x => x).join(','));
}
}
</script>
<style lang='scss' scoped>
</style>
<el-form-item
label="全部数据ID:"
prop="image_id_field"
>
<multi-select
ref="imageIdFieldMulti"
:options="matchOptions"
:value.sync="formModel.image_id_field"
/>
</el-form-item>