基於element的checkbox實例：復選框組，選中之后，保存選中項value值，顯示label

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>