基于element的checkbox实例：复选框组，选中之后，保存选中项value值，显示label

Posted 2020-11-27 pangchunlei

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>