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

總結(jié)：

indeterminate屬性 表示 checkbox 的不確定狀態(tài) (小橫線樣式)

此代碼中為mock數(shù)據(jù)，真實場景中，首先拿到接口返回數(shù)據(jù)，之后加工成前端想要的數(shù)據(jù)結(jié)構(gòu) (類似代碼中data的數(shù)據(jù)格式)，可通過for循環(huán)、map遍歷、reduce等方式

在@change事件中寫內(nèi)部邏輯，最終實現(xiàn)功能

總結(jié)

以上是生活随笔為你收集整理的html 遍历div内check,vue+element中checkbox 实现遍历分组全选的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。