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
總結(jié)：
indeterminate屬性 表示 checkbox 的不確定狀態(tài) (小橫線樣式)
此代碼中為mock數(shù)據(jù)，真實(shí)場(chǎng)景中，首先拿到接口返回?cái)?shù)據(jù)，之后加工成前端想要的數(shù)據(jù)結(jié)構(gòu) (類似代碼中data的數(shù)據(jù)格式)，可通過for循環(huán)、map遍歷、reduce等方式
在@change事件中寫內(nèi)部邏輯，最終實(shí)現(xiàn)功能
總結(jié)
以上是生活随笔為你收集整理的html 遍历div内check,vue+element中checkbox 实现遍历分组全选的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 骁龙8+手机颜值天花板 曝realme
- 下一篇： vue 搜索框header_vue项目h