el-checkbox入门学习

已于 2022-05-13 15:28:10 修改
阅读量2.3k 收藏 3
点赞数
分类专栏： element-ui 文章标签： elementui
于 2022-05-13 14:48:06 首次发布
原文链接：https://element.eleme.cn/#/zh-CN/component/checkbox
版权

el-checkbox入门学习

  • 知识点
    el-checkbox
    el-checkbox-group
    el-checkbox-button
    border
    indeterminate(较难)
  • 代码效果图
    在这里插入图片描述
  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id='app'>
        <!-- on v-model's checkbox default bind type is boolean,value if true will be checked -->
        <el-row>
            <el-checkbox v-model='checked'>checkbox1</el-checkbox>
        </el-row>
        <!-- disabled checkbox -->
        <el-row>
            <el-checkbox v-model='checked' disabled>checkbox1</el-checkbox>
            <el-checkbox v-model='checked' disabled>checkbox2</el-checkbox>
        </el-row>
        <!-- el-checkbox-group v-model type is array,label contains array will be checked -->
        <el-row>
            <el-checkbox-group v-model='checkedList'>
                <el-checkbox v-for='item in checkboxList' :key="item.id" :label='item.id'>{{item.name}}</el-checkbox>
            </el-checkbox-group>
        </el-row>
        
        <!-- min max controll can be checked count -->
        <el-row>
            <el-checkbox-group v-model='checkedList' :min='1' :max='3'>
                <el-checkbox v-for='item in checkboxList' :key='item.id' :label='item.id'>{{item.name}}</el-checkbox>
            </el-checkbox-group>
        </el-row>
        <!-- el-checkbox-button + size -->
        <el-row>
            <el-checkbox-group v-model='checkedList'>
                <el-checkbox-button v-for='item in checkboxList' :key='item.id' :label='item.id'>{{item.name}}</el-checkbox-button>
            </el-checkbox-group>
        </el-row>
        <el-row>
            <el-checkbox-group v-model='checkedList' size='medium'>
                <el-checkbox-button v-for='item in checkboxList' :key='item.id' :label='item.id'>{{item.name}}</el-checkbox-button>
            </el-checkbox-group>
        </el-row>
        <el-row>
            <el-checkbox-group v-model='checkedList' size='small'>
                <el-checkbox-button v-for='item in checkboxList' :key='item.id' :label='item.id'>{{item.name}}</el-checkbox-button>
            </el-checkbox-group>
        </el-row>
        <el-row>
            <el-checkbox-group v-model='checkedList' size='mini' disabled>
                <el-checkbox-button v-for='item in checkboxList' :key='item.id' :label='item.id'>{{item.name}}</el-checkbox-button>
            </el-checkbox-group>
        </el-row>
        <!-- border -->
        <el-row>
            <el-checkbox-group v-model='checkedList'>
                <el-checkbox v-for='item in checkboxList' :key='item.id' :label='item.id' border>{{item.name}}</el-checkbox>
            </el-checkbox-group>
        </el-row>
        <el-row>
            <el-checkbox-group v-model='checkedList' size='mediumn'>
                <el-checkbox v-for='item in checkboxList' :key='item.id' :label='item.id' border>{{item.name}}</el-checkbox>
            </el-checkbox-group>
        </el-row>
        <el-row>
            <el-checkbox-group v-model='checkedList' size='small'>
                <el-checkbox v-for='item in checkboxList' :key='item.id' :label='item.id' border>{{item.name}}</el-checkbox>
            </el-checkbox-group>
        </el-row>
        <el-row>
            <el-checkbox-group v-model='checkedList' size='mini'>
                <el-checkbox v-for='item in checkboxList' :key='item.id' :label='item.id' border>{{item.name}}</el-checkbox>
            </el-checkbox-group>
        </el-row>
        <!-- 难点：indeterminate -->
        <el-row>
            <el-checkbox :indeterminate='indeterminate' v-model='checkAll' @change='changeCheckkAll'>checkAll</el-checkbox>
            <el-checkbox-group v-model='checkedList' @change='changeCheckedAll'>
                <el-checkbox v-for='item in checkboxList' :key='item.id' :label='item.id' >{{item.name}}</el-checkbox>
            </el-checkbox-group>
        </el-row>
    </div>
</body>
</html>

<script>
    let vm = new Vue({
        el:'#app',
        data:{
            checked:true,
            checkboxList:[
                {id:1,name:'number1'},
                {id:2,name:'number2'},
                {id:3,name:'number3'},
                {id:4,name:'number4'}
            ],
            checkedList:[1,3],
            checkedAll:false,
            indeterminate:false,
        },
        created(){
            this.changeCheckedAll()
        },
        monuted() {
            this.changeCheckedAll()
        },
        methods:{
            changeCheckkAll(){
                let checkedLength = this.checkedList.length
                let totalLength = this.checkboxList.length
                let flag = checkedLength === totalLength
                this.checkedList = []
                this.indeterminate = false
                if(!flag){
                    this.checkboxList.forEach(element => {
                        this.checkedList.push(element.id)
                    });
                }
            },
            changeCheckedAll(){
                let checkedLength = this.checkedList.length
                let totalLength = this.checkboxList.length
                let flag = checkedLength === totalLength
                if(flag){
                    this.checkAll = true
                    this.indeterminate = false
                }else{
                    this.checkAll = false
                    this.indeterminate = totalLength>checkedLength && checkedLength > 0
                }
            }
        }
    })
</script>

<style>
    .el-row{
        margin-bottom:20px;
    }
</style>
自律最差的编程狗
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-checkbox的基本使用，避坑指南
weixin_46724415的博客
11-01 2万+
el-checkbox的基本使用，避坑指南 使用el-checkbox勾选出现的问题：全选不生效，全选后底下的勾选不能回显
【ElementUI】复选框 el-checkbox
joanmelon的博客
01-22 7518
label是id值,必须是string类型。可以label赋值id，中间写成label。
【区分vue2和vue3下的element UI Checkbox 多选框组件，分别详细介绍属性，事件，方法如何使用，并举例】
最新发布
xiejunlan的博客
05-30 931
在 Vue 2 中，Element UI 提供了和组件用于多选框功能。而在 Vue 3 中，Element UI 没有直接支持 Vue 3，但有一个名为 Element Plus 的项目提供了与 Element UI 类似但支持 Vue 3 的组件集。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中和组件的属性、事件和方法，并给出示例。
el element 组件el-checkbox
yuxuan89814的专栏
08-13 3838
el-checkbox是多选框 <el-checkboxv-if="row.is_sub==0"v-model="row.checked":checked="row.checked":label="row.name"@change="new_change_res(row)"></el-checkbox> v-if 是Vue的关键字，表示row.is_sub==0为真则现在这个checkbox DOM元素 v-model绑定的数据是value ...
VUE-Element组件（九） CheckBox多选框
w_t_y_y的博客
08-13 1万+
一、举例：现有通讯录，点击出现通讯录选择弹框。弹框右侧为选择的用户列表，可以点击删除，左侧默认为角色列表，可以勾选角色，也可以点击角色进入角色详情页勾选具体的用户。还可以在左侧上方搜索用户名或者账号出来用户列表来勾选。其中，角色列表复选框、搜索用户列表复选框、选中的用户列表复选框，三者的选中状态需要关联（不勾选、半选、全选）。 代码实现： 1、父组件： <div class="user-div" @click="openSelectUserDialog"> &...
Element之checkBox复选框
qq_51481048的博客
02-15 4244
一.基础用法 <el-checkbox v-model="checked">选项一</el-checkbox> 注:在<el-checkbox>中通过v-model绑定变量，在单一的checkBox中，默认的绑定变量的值回事Boolean，选中为true 二.禁用状态 <el-checkbox v-model="checked1" disabled>选项1</el-checkbox> 三.多选框组 <el-checkbox-g
nested_el-checkbox:element-ui的el-checkbox实现嵌套多选，单选
05-12
nested_el-checkbox element-ui的el-checkbox实现嵌套多选，单选 tips:chrome获取本地json数据时会产生跨域问题，建议用firefox直接打开 效果图 主要功能： 实现多选框层级嵌套 当选中一个二级子菜单的时候，其对应...
Vue动态生成el-checkbox点击无法赋值的解决方法
10-17
主要给大家介绍了关于Vue动态生成el-checkbox点击无法赋值的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
react-checkbox-tree:一个简单而优雅的React复选框树
05-12
React复选框树 一个简单优雅的复选框树，用于... node_modules/react-checkbox-tree/src/less/react-checkbox-tree.less node_modules/react-checkbox-tree/src/scss/react-checkbox-tree.scss 在样式表中包含以
element-ui CheckBox全选.txt
12-24
vue配合element-ui框架中el-checkbox 接收json"data:[{key:1,name:'小李'}]"对象时全选与非全选时获取相关设定的值源码文件
element-ui框架复选框全选功能简单实现
H_hl2021的博客
10-10 4024
el-check 复选框 全选功能简单实现
vue中el-checkbox全选、反选、多选
qq_45268602的博客
02-18 8578
实现一组数据的全选、反选、多选操作
[element-ui]在el-table中使用el-checkbox实现勾选功能
xxuxioxx的博客
10-07 9218
利用el-checkbox模拟表格自带的勾选事件
vue与element ui的el-checkbox的坑el-checkbox不能选中或者选中不能取消
热门推荐
jerryyang_2017的博客
06-17 2万+
一，场景 通过使用checkbox，实现如图的场景， 点击某个tag，实现选中和非选中状态。 二， 官网的例子 通过切换checked值为true或者false来实现，一个checkbox的状态切换 <template> <!-- `checked` 为 true 或 false --> <el-checkbox v-model="checked">备选项</el-checkbox> </template> <scr
el-checkbox角色多选组件
qq_52441253的博客
01-09 564
checkbox多选框组件
el-checkbox复选框回显的坑、传参数据格式
weixin_43367044的博客
09-01 2400
回显复选框内容后，无法修改或者点击的情况
ElementUI浅尝辄止35：Checkbox 多选框
渣渣砖
09-08 1635
一组备选项中进行多选。
在使用el-checkbox复选框编辑、回显时碰到的坑
dawang18232123的博客
02-24 2047
根据后端要求，需要传递id过去，即‘1,2,3’这种的格式，但是el-checkbox复选框打印出来的结果是[‘美食’，‘玩具’，‘家具’]这种数组样式的，所以需要用label绑定的是id值。此时选择复选框的时候change打印出来的是符合要求的，但是在回显编辑的时候，再次选择其他复选框的时候，无法进行勾选。其中e为true，意思是选中了当前的选项，item是传递过来的id及其name值，这样同样也解决了编辑回显时再次选择的问题。这样就解决了，编辑回显时再次选择的问题。选中则放进数组，取消选中则删除它。
ElementUI的el-checkbox的自定义使用
两年半前端练习生的博客
11-15 2642
【代码】ElementUI的el-checkbox的自定义使用。
el-checkbox-group中el-checkbox的内容不显示
08-23
你可以检查以下几个可能的原因来解决el-checkbox-group中el-checkbox内容不显示的问题： 1. 确保你已经正确引入了Element UI库，并且el-checkbox和el-checkbox-group组件都已经在你的代码中注册。 2. 检查你的数据绑定是否正确。确认el-checkbox-group的v-model绑定的数据是一个数组，并且数组中的元素与el-checkbox的value属性对应。 3. 确保你正确地使用了v-for指令来循环渲染el-checkbox组件。检查v-for指令的语法和作用域变量是否正确。 4. 检查el-checkbox组件的label属性是否设置正确。如果label属性为空或者未设置，el-checkbox将不会显示任何内容。 5. 检查CSS样式是否干扰了el-checkbox的显示。可以通过调整样式或者使用浏览器的开发者工具来排查样式问题。 如果以上方法都无法解决问题，建议提供更多相关的代码和错误信息，以便我能够更准确地帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值