elementui select选中获取整个item对象以及回显

问题描述：

常规的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 绑定的值即可

elementui select选中获取整个item对象以及回显相关推荐

thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中
thymeleaf(th:each th:selected) 从后台动态获取下拉框数据回显及选中 <select οnchange="getChilds(this.value)&quo ...
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决)
vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) 参考文章: (1)vue el-tree 同时向后台传递选中和半选节点数据 (回显数据勾选问题已解决) (2)ht ...
elementui select选择器获取选中拿到当前对象
有时候因为需求等情况,我们需要拿到select选择器选择的整个对象,不光只拿到他的value 当使用element ui 的select选择器选择一个选项时,使用@change事件时只能得到一个Id, ...
elementui Cascader 省市区联动选择器，应用与回显
目的:往数据库添加数据,形式为:xx省/xx市/xx县 ,并在前端回显 eg: 在element form表单里添加 <el-form-item label="地区" pro ...
vue+elementUI同时上传视频和图片并回显
1.效果 2.数据结构;根据name或url后缀来判断是图片或者视频类型 fileList = [{name:'123.mp4',url:'123.mp4'},{name:'124.png',url: ...
记一次jquery: select下拉框默认设置选中项（利用数据回显）
1. 用selected属性默认增加选中项: <select name="" id=""><option value="1" ...
elementUI checkbox选中回显操作注意事项
具体的详情介绍请看,elementUI checkbox. checkbox的回显操作是基于 el-checkbox-group 标签v-module绑定的数组来实现回显,这个数组可以是一维数组,也可 ...
element显示服务器的图片,Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显而我们也常遇到表单中包含图片上传的需求,并且需要在table中显示图片,所以这里我就讲一下结合后端的SpringMVC框架如 ...
Vue+ElementUI+SpringMVC实现图片上传和回显
Vue+ElementUI+SpringMVC实现图片上传和table回显在之前我们已经讲过了 Vue+ElementUI+SpringMVC实现分页 . 而我们也常遇到表单中包含图片上传的需求,并 ...

elementui select选中获取整个item对象以及回显

elementui select选中获取整个item对象以及回显相关推荐

最新文章

热门文章