欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>
相关标签: vue.js