绑定下拉框其中有两种一种是自定义，一种是数据库接口获取
一、自定义
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;
            }
        }

         <Card>
          <Select v-model="typeSelect" style="width:150px;float: right;z-index:999;position: relative" placeholder="请选择指标" @click="changeType()">
            <Option v-for="type in typeArray" :value="type.value" :key="type.label">{{ type.label }}</Option>
          </Select>
          <chart-card :stats-data="playTypePie"></chart-card>
        </Card>

    changeType:function (){
      console.log('您选择了', this.typeSelect)
    },

在点击选择数据类型的时候发现无法触发changeType().

@click="getDivision()"换成@click.native="getDivision()"就可以了
 

给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）

vue下拉框选择触发事件无效

在vue下拉框中如果想在点击下拉框的时候触发事件，使用@click方法不会触发事件。给vue组件绑定事件时候，必须加上native ，不然不会生效（监听根元素的原生事件，使用 .native 修饰符）。另外@change事件值发生改变的时候触发。

代码如下：

 <el-select v-model="scope.row.sfff" filterable placeholder="请选择" @click.native="selectData(scope.row.miiId)" @change="changeData(scope.row.sfff,scope.$index,scope.row.weight)" >
<el-option v-for="(item,index) in listData" :key="index" :label="item.scoreCondition" :value="item.score"> </el-option>  </el-select>