标签:component ebe bar date() lis 描述 update 导入 element
element中,checkbox组,选中时,保存的是名称,现需要保存对应的value值
1、代码:
<!-- 文件描述:基于element的checkbox实例:复选框组,选中之后,保存选中项value值,显示label 创建时间:2020/4/23 10:19 创建人:Administrator --> <template> <div class="" style="padding: 50px;"> <div style="padding:15px 0;"> <el-button type="primary" plain size="mini" @click="handleCheckAllChangeBed(1)">全选</el-button> <el-button type="primary" plain size="mini" @click="handleCheckAllChangeBed(0)">反选</el-button> </div> <div style="padding: 5px; width: 300px;"> <el-checkbox-group v-model="checkList"> <el-checkbox v-for="(item,index) in checkboxList" :key="index" :label="item.bedId"> {{item.bedName}} </el-checkbox> </el-checkbox-group> </div> <div style="padding: 20px;width: 300px;"> {{checkList}} </div> </div> </template> <script> // 这里可以导入其他文件(比如:组件,工具js,第三方插件js,json文件,图片文件等等) // 例如:import 《组件名称》 from ‘《组件路径》‘; // 例如:import uploadFile from ‘@/components/uploadFile/uploadFile‘ export default { name: ‘‘, // import引入的组件需要注入到对象中才能使用 components: {}, data() { // 这里存放数据 return { checkList: [], checkboxList: [ { "area": "5dc705d912ef40b7866def5b9736cc82", "createTime": "2019-10-14 13:35:31", "display": 0, "bedId": "010566c75bee4013bcc2d237a17e4939", "deptId": "6ffe27da1d7a4865998e8b03cc85b520", "remark": null, "sort": null, "bedName": "13号床", "isUsed": 0, "roomId": "73552a9021134c578a7a8015660940a7", "roomName": "02" }, { "area": null, "createTime": "2019-10-14 11:35:19", "display": 0, "bedId": "01b38c6fc1204dc19f27d3ba08dc3dfb", "deptId": null, "remark": null, "sort": null, "bedName": "28号床", "isUsed": 0, "roomId": null, "roomName": null }, { "area": "5dc705d912ef40b7866def5b9736cc82", "createTime": "2019-10-14 13:35:31", "display": 0, "bedId": "01dc1841a6da4e4cb6aa5a2d611274f8", "deptId": "6ffe27da1d7a4865998e8b03cc85b520", "remark": null, "sort": null, "bedName": "25号床", "isUsed": 0, "roomId": "73552a9021134c578a7a8015660940a7", "roomName": "02" }, { "area": null, "createTime": "2019-10-18 10:46:42", "display": 0, "bedId": "01e349d85ef44e91b548ffe5f9321198", "deptId": null, "remark": null, "sort": null, "bedName": "5号床", "isUsed": 0, "roomId": null, "roomName": null }, { "area": "5dc705d912ef40b7866def5b9736cc82", "createTime": "2019-10-14 13:35:31", "display": 0, "bedId": "02ed4187696e412196688fdb7ef2dac9", "deptId": "6ffe27da1d7a4865998e8b03cc85b520", "remark": null, "sort": null, "bedName": "24号床", "isUsed": 0, "roomId": "73552a9021134c578a7a8015660940a7", "roomName": "02" }, { "area": "5dc705d912ef40b7866def5b9736cc82", "createTime": "2019-10-14 13:35:32", "display": 0, "bedId": "02ef27c4ba1c49f0bb163a5daa6f7be8", "deptId": "6ffe27da1d7a4865998e8b03cc85b520", "remark": null, "sort": null, "bedName": "65号床", "isUsed": 0, "roomId": "a6172233da07418c8763cc18ed392862", "roomName": "01" }, { "area": null, "createTime": "2019-10-18 10:46:25", "display": 0, "bedId": "04b4d775891847378431a86bf4eb18a2", "deptId": null, "remark": null, "sort": null, "bedName": "130号床", "isUsed": 0, "roomId": null, "roomName": null } ] } }, // 监听属性 类似于data概念 computed: {}, // 方法集合 methods: { // 床位全选 handleCheckAllChangeBed (val) { if (val === 0) { this.checkList = [] } else { this.checkList = this.checkboxList.map(item => item.bedId) } } }, // 监控data中的数据变化 watch: {}, // 生命周期 - 创建完成(可以访问当前this实例) created() { }, // 生命周期 - 挂载完成(可以访问DOM元素) mounted() { }, beforeCreate() { }, // 生命周期 - 创建之前 beforeMount() { }, // 生命周期 - 挂载之前 beforeUpdate() { }, // 生命周期 - 更新之前 updated() { }, // 生命周期 - 更新之后 beforeDestroy() { }, // 生命周期 - 销毁之前 destroyed() { }, // 生命周期 - 销毁完成 activated() { } // 如果页面有keep-alive缓存功能,这个函数会触发 } </script> <style scoped lang="scss"> //@import url(); 引入公共css类 </style>
基于element的checkbox实例:复选框组,选中之后,保存选中项value值,显示label
标签:component ebe bar date() lis 描述 update 导入 element
原文地址:https://www.cnblogs.com/pangchunlei/p/12759445.html