html 遍历div内check,vue+element中checkbox 实现遍历分组全选

1、html部分

style="margin-left: 30px"

:indeterminate="item.isIndeterminate"

v-model="item.isCheck"

@change="checkTitle(item.isCheck, index)"

>全选

v-model="item.checkedData"

@change="checkItem(item.checkedData, index)"

v-for="(a, index) in item.children"

:label="a.value"

:key="index"

>{{ a.label }}

2、js部分

export default {

data() {

return {

data: [

{

isCheck: false,

isIndeterminate: true,

checkedData: [],

children: [

{

value: "11",

label: "分组1-1",

{

value: "12",

label: "分组1-2",

{

isCheck: false,

isIndeterminate: true,

checkedData: [],

children: [

{

value: "21",

label: "分组2-1",

{

value: "22",

label: "分组2-2",

{

value: "23",

label: "分组2-3",

{

value: "24",

label: "分组2-4",

};

methods: {

checkItem(val, index) {

let checkedCount = val.length;

this.data[index].isCheck =

checkedCount === this.data[index].children.length;

this.data[index].isIndeterminate =

checkedCount > 0 && checkedCount < this.data[index].children.length;

checkTitle(val, index) {

let arr = [];

const re = this.data[index].children;

//全选

if (val) {

for (let i = 0; i < re.length; i++) {

arr[i] = re[i]["value"];

}

this.data[index].checkedData = arr;

this.data[index].isIndeterminate = false;

};

效果图：

image.png

总结：

indeterminate属性表示 checkbox 的不确定状态 (小横线样式)

此代码中为mock数据，真实场景中，首先拿到接口返回数据，之后加工成前端想要的数据结构 (类似代码中data的数据格式)，可通过for循环、map遍历、reduce等方式

在@change事件中写内部逻辑，最终实现功能

html 遍历div内check,vue+element中checkbox 实现遍历分组全选相关推荐

基于Vue和Element-UI自定义分组以及分组全选Select 选择器
文章目录基于Vue和Element-UI自定义分组以及分组全选Select 选择器在这里插入图片描述源代码基于Vue和Element-UI自定义分组以及分组全选Select 选择器上一篇博文 ...
vue实现购物车简单的功能-单选全选总价计算、批量删除
vue实现购物车简单的功能-----单选全选总价计算.批量删除等观看了后盾人视频教学,视频里面对于全选和单选的功能没有讲全,于是自己研究了一下,前端小白,也是第一次写博客,有什么不足和可以优化的地方 ...
点击编辑框全选内容java_Android 中使用EditText 点击全选再次点击取消全选功能
最近在开发浏览器碰到这么一个需求:点击地址栏的时候,需要全选并调出键盘,再次点击就取消全选显示光标.点击屏幕除地址栏其他位置时,键盘隐藏,隐藏光标. 大部分浏览器都是这样的逻辑,这样可以提高用户体验, ...
【Vue.js】Vue.js组件库Element中的单选框、多选框、输入框和计数器
1.Radio 单选框基础用法由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器. 要使用 Radio 组件,只需要设置v-model绑定变量,选中意味着变量的值为相应 Rad ...
vue 工作项目中实现消息列表的全选，反选，删除功能
template HTML 结构 radio 我是用的vux 中的checker 组件:(这个可以改成原生radio :也可以绑定v-model) <div class="list&q ...
数组反向遍历ios_iOS开发实用技巧—Objective-C中的各种遍历（迭代）方式
iOS开发实用技巧-Objective-C中的各种遍历(迭代)方式说明: 1)该文简短介绍在iOS开发中遍历字典.数组和集合的几种常见方式. 2)该文对应的代码可以在下面的地址获得:https:// ...
element中checkbox全选反选功能
单循环: <el-button @click="handleLimit(scope.row)"type="warning"icon="el-ic ...
vue+element ui实现树形表格加复选框（checkbox）
element ui中有带复选框的表格和树形数据的表格,不过呢,wo遇到一个新的需求,其中就是要实现树形表格和复选框的结合,尝试过很多方法,最后自己总结出一套,实现了全选,单选,多选. 效果图: 代码 ...
vue.js实战——购物车练习（包含全选功能）
vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

html 遍历div内check,vue+element中checkbox 实现遍历分组全选

html 遍历div内check,vue+element中checkbox 实现遍历分组全选相关推荐

最新文章

热门文章