vue绑定下拉框——vscode

绑定下拉框其中有两种一种是自定义，一种是数据库接口获取
一、自定义
1.下拉列表绑定

<el-col :span="10" :offset="2">
        <cs-form-item :label="'计量单位'">
          <cs-field-select
            :placeholder="'请选择'"
            v-model="item.Unit"
            :options="Measurement"
            @input="change"
          />
        </cs-form-item>
      </el-col>

2.@input绑定改变值

 methods: {
    /* 改变值 */
    change() {
      this.$forceUpdate()
    }
  },

4.绑定data item和Measurement

data() {
    return {
      item: {},
      tenantId: this.$store.getters.tenant.TenantId,
      Measurement: Parameter.Assets.Measurement.Items,

    }
  },

import引入组件，@表示src

<script>
import Parameter from '@/utils/parameters'

export default {
  name: 'Insured_from',
  props: ['formData'],
  data() {
    return {
      item: {},
      tenantId: this.$store.getters.tenant.TenantId,
      CertTypeOptions: [],
      Measurement: Parameter.Assets.Measurement.Items,
      areaOption: [],
      supplierOption: []
    }
  },
  created() {
    this.getAxios('/Areas/{0}/FetchAreaOption'.format(this.tenantId)).then(res => {
      this.areaOption = res
    }),
      this.getAxios('/Suppliers/{0}/FetchSupplierOption'.format(this.tenantId)).then(res => {
        this.supplierOption = res
      })
  },
  methods: {
    /* 改变值 */
    change() {
      this.$forceUpdate()
    }
  },
  /* formData绑定item */
  watch: {
    formData: {
      handler(val) {
        this.item = val
      },
      immediate: true,
      deep: true
    }
  }
}
</script>

5.根据上面代码找到文件import Parameter from ‘@/utils/parameters’

let Parameter = {}

/* 公共 */  
// Parameter.Common = {
Parameter.Assets = {
  Status: {
    Title: '计量单位',
    Items: [
      { Value: 0, Label: '个' },
      { Value: 1, Label: '张' },
      { Value: 2, Label: '套' },
      { Value: 3, Label: '台' },
      { Value: 4, Label: '组' },
      { Value: 5, Label: '架' }
    ]
  },
  // 状态
  CertificationTypeId: {
    Title: '状态',
    Items: [
      { Value: -1, Label: '退出' },
      { Value: 0, Label: '闲置' },
      { Value: 1, Label: '在用' },
      { Value: 2, Label: '借用' },
      { Value: 3, Label: '维修中' },
      { Value: 4, Label: '境报废待审' },
      { Value: 5, Label: '调拨待审' },
      { Value: 6, Label: '处置待审' },
      { Value: 7, Label: '领用待审' },
      { Value: 8, Label: '借用待审' }
    ]
  },
  // 计量单位
  Measurement: {
    Title: '计量单位',
    Items: [
      { Value: '个' , Label: '个' },
      { Value: '张', Label: '张' },
      { Value: '套', Label: '套' },
      { Value: '台', Label: '台' },
      { Value: '组', Label: '组' },
      { Value: '架', Label: '架' }
    ]
  }
}

export default Parameter

二、数据库绑定
1.

 <el-col :span="10" :offset="2">
        <cs-form-item :label="'区域'">
          <cs-field-select
            :placeholder="'请选择'"
            v-model="item.PlaceName"
            :options="areaOption"
            @input="change"
          />
        </cs-form-item>
      </el-col>

import Parameter from '@/utils/parameters'

areaOption: [],

 this.getAxios('/Suppliers/{0}/FetchSupplierOption'.format(this.tenantId)).then(res => {
        this.supplierOption = res
      })

<script>
import Parameter from '@/utils/parameters'

export default {
  name: 'Insured_from',
  props: ['formData'],
  data() {
    return {
      item: {},
      tenantId: this.$store.getters.tenant.TenantId,
      CertTypeOptions: [],
      Measurement: Parameter.Assets.Measurement.Items,
      areaOption: [],
      supplierOption: []
    }
  },
  created() {
    this.getAxios('/Areas/{0}/FetchAreaOption'.format(this.tenantId)).then(res => {
      this.areaOption = res
    }),
      this.getAxios('/Suppliers/{0}/FetchSupplierOption'.format(this.tenantId)).then(res => {
        this.supplierOption = res
      })
  },
  methods: {
    /* 改变值 */
    change() {
      this.$forceUpdate()
    }
  },
  /* formData绑定item */
  watch: {
    formData: {
      handler(val) {
        this.item = val
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
.title-part {
  margin: 0 5% 20px;
  padding-bottom: 5px;
  border-bottom: solid 1px #dadada;
}
</style>

 [HttpGet("FetchSupplierOption")]
        public List<SupplierOption> FetchSupplierOption()
        {
            var token = this.GetSecToken();
            using (var db = Db.GetTenantDb(token.TenantId))
            {
                var result = Supplier.GetList(db, token.TenantId);
                var resultArray = new List<SupplierOption>();
                foreach (var item in result)
                {
                    resultArray.Add(new SupplierOption() { Value = item.Id, Label = item.Name });
                }
                return resultArray;
            }
        }