子级HTML。需要注意的是，这里面绑定了两次stateChanged事件，只是参数不同。@click="stateChanged(index, j, k)"代表第二层级的子级。@click="stateChanged(index, i)"代表第一层级的子级。
<ul v-show="isOpenItem[index] && isOpenItem[index].group"> <div v-for="(second,j) in item.son" :key="second.id"> <div @click="checkSecondItem(index, j)"> <div @click="checkSecondAll(index, j)" @click.stop> <i :class="{'icon-gouxuan':isSelectAll[index] && isSelectAll[index].child[j],'icon-checkboxround0':isSelectAll[index] && !isSelectAll[index].child[j]}"></i> </div> {{second.name}} </div> <ul v-show="isOpenItem[index] && isOpenItem[index].child[j]"> <li v-for="(third,k) in second.member" :key="third.pid"> <input @click="stateChanged(index, j, k)" type="checkbox" :id="'check'+third.pid" v-model="selectPeople" :value="third"> <label :for="'check'+third.pid"> <div :style="{ background: third.headColor }">{{ third.name }}</div> <div> <p> {{third.userName}} </p> <p>{{ third.job }}</p> </div> </label> </li> </ul> </div> <li v-for="(people,i) in item.member" :key="people.pid"> <input @click="stateChanged(index,i)" type="checkbox" :id="'check'+people.pid" v-model="selectPeople" :value="people"> <label :for="'check'+people.pid"> <div :style="{ background: people.headColor }">{{ people.name }}</div> <div> <p> {{people.userName}} </p> <p>{{ people.job }}</p> </div> </label> </li> </ul>
子级JS。其中，stateChanged函数，通过传入的参数不同来判断当前属于哪一层级的数据。setFirstLevelChecked函数，通过判断所有子级选项的选中状态来给第一层级添加选中状态。
stateChanged(index, i, j) { if (j !== undefined) { //如果有j值，代表第三层级数据 if (this.selectPeople.includes(this.jobList[index].son[i].member[j])) {//点击之前为选中状态 this.$set(this.isSelectAll[index].child, i, false);//改变父级按钮的选中状态为非选中状态 this.$set(this.isSelectAll[index], 'group', false);//改变顶级按钮的选中状态为非选中状态 } else {//点击之前为非选中状态 //给父级添加选中状态 for (let k = 0; k < this.jobList[index].son[i].member.length; k++) { if (!this.selectPeople.includes(this.jobList[index].son[i].member[k]) && this.jobList[index].son[i].member[k] != this.jobList[index].son[i].member[j]) {//只要有其中一个未选中，就跳出循环，不给父级添加选中状态 return false } } this.$set(this.isSelectAll[index].child, i, true);//改变父级按钮的选中状态为选中状态 this.setFirstLevelChecked(index, this.jobList[index].son[i].member[j]);//给第一级添加选中状态 } } else {//没有j值，第二层级数据 if (this.selectPeople.includes(this.jobList[index].member[i])) {//点击之前为选中状态 this.$set(this.isSelectAll[index], 'group', false);//改变父级按钮的选中状态为非选中状态 } else {//点击之前为非选中状态 this.setFirstLevelChecked(index, this.jobList[index].member[i]);//给第一级添加选中状态 } } }, setFirstLevelChecked(index, data) {//给第一级添加选中状态 for (let k in this.jobList[index].member) { if (!this.selectPeople.includes(this.jobList[index].member[k]) && data != this.jobList[index].member[k]) {//只要有其中一个未选中，就跳出循环，不给父级添加选中状态 return false } } for (let i in this.jobList[index].son) {//循环添加有部门的人员（对应列表第三层级） for (let j in this.jobList[index].son[i].member) { if (!this.selectPeople.includes(this.jobList[index].son[i].member[j]) && data != this.jobList[index].son[i].member[j]) { //如果已经存在，就不用再进行添加 return false } } } this.$set(this.isSelectAll[index], 'group', true);//改变第一级按钮的选中状态为选中状态 }