在项目开发中,使用多选框组,选中时想要取到该项的id而不是label值:
- checkbox-group:Element ui 中的组件,只需要在 Group 中使用v-model绑定Array类型的变量即可,并且绑定change实践, el-checkbox 的 label属性是该 checkbox 对应的值,所以只要label绑定id就可以了,显示的话使用label;
- 看代码
<el-checkbox-group v-model="checked" @change="test"> <el-checkbox v-for="item in checkList" :key="item.id" :label="item.id" >{{item.label}} </el-checkbox> </el-checkbox-group> <script> export default { data(){ return { checked: [], checkList: [ {id: 0001, label: '飞机'}, {id: 0002, label: '轮船'}, {id: 0002, label: '汽车'}, {id: 0002, label: '火车'}, ], } }, methods: { test(val){ this.checked = val; console.log(this.checked) } } } </script>
console打印出的值即为选中的复选框的id的值。