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

Posted pangchunlei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了基于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>


以上是关于基于element的checkbox实例:复选框组,选中之后,保存选中项value值,显示label的主要内容,如果未能解决你的问题,请参考以下文章

selenium 单选框/复选框定位

如何用JS控制复选框选中,element.checked

element-ui tbale checkbox复选功能

python设置菜单项checkbox为非选中状态

JQuery对checkbox的操作

点击文本框弹出可供选择的checkbox复选框代码实例