问题描述:
常规的select选中若采用v-model绑定的参数进行获取,仅能获取到label值,获取不到整个item对象。
解决办法:
1. 设置select的 option的vule属性为:value=“item” item 为对象
2. 必须与multiple同同时存在,否则不生效
3. 设置select的value-key,如value-key="funcKey"
代码示例:
<el-form-item label="统计函数:" prop="statisticFunctions"><el-selectv-model="pageDetail.statisticFunctions"multiplevalue-key="funcKey"placeholder="请选择统计函数"><el-optionv-for="item in statisticFunctions":key="item.funcKey":label="item.funcName":value="item"></el-option></el-select></el-form-item>//config.js,定义了statisticFunctions statisticFunctions = {min: {funcKey: "min",funcName: "最小值",funcSymbol: "min_over_time"},max: {funcKey: "max",funcName: "最大值",funcSymbol: "max_over_time"},avg: {funcKey: "avg",funcName: "平均值",funcSymbol: "min_over_time"},sum: {funcKey: "sum",funcName: "求和",},count: {funcKey: "count",funcName: "计算",},quantile: {funcKey: "quantile",funcName: "分位数",},// unsupported: {//funcKey: "unsupported",//funcName: "暂不支持",// },}
估计选中的是item有人会不知道该如何回显了,其实很简单,回显时这个select数组应该也是一个数组对象,回显如下:
pageDetail.statisticFunctions = [avg: {funcKey: "avg",funcName: "平均值",funcSymbol: "min_over_time"},sum: {funcKey: "sum",funcName: "求和",},]//在回显的时候赋值给select 绑定的对象,包含和value-key绑定的一样的值即可,且是一个数组对象。如果后端没有返回一个数组对象回来,可以拿到值取遍历所有的options将符合条件的值push到select 绑定的值即可