首先，看效果图

在线体验地址：https://hxkj.vip/demo/multipleList/.提示：打开后按F12，手机模式下吃。味道更好！

可以看出，该列表有三种呈现形式：

1.第一级包含下属子级，第二级包含子级。2.第一级只包含第二级，第二级包含子级。

接下来，分析列表实现的功能：

1.单击父级以展开和折叠直接子级；2.单击父级的复选图标，选择或取消该级别下的所有子级；3.当你点击一个子项达到父项的全选状态时，会自动勾选父项的勾选图标；相反，当选择不完整时，父项的勾选图标会自动取消勾选；4.所有相同级别之间检查状态的变化互不影响；

分析完成后，是时候完成代码了。

1.首先，构建我们需要的数据结构。

data(){ return { head color :[' # 1c 71 FB '，' # f7aa47 '，' # 00c182 '，' # ff6769 '，' # 917ee6 '，' # 2cb2eb']，//候选色joblist: [{'id Name': '嫩江一中'，' Member' : [{'PID' :' 12058 '，' username ' :UserName': '周大龙'，' job': '安全员'，' Name': '大龙' }]，' son' : [{'id' :' 2513 '，' name': '校领导'，Member' : [{'PID' :' 12056 '，' username': '凌凌凌'，' Job ' 3: '安全员'，' Name ' 3: ' {'ID' :' 2524 '，' Name' : '总监部'，' Member ' :[{ ' PID ' :]Job ' : '安全员'，' name': '组长' }，{'PID' :' 12025 '，' username' :' tsy '，' job' :' 11 '，' name ' : ' sy Name ' : ' City ' UserName': '未开化'，' job': '高级建筑师'，' Name': '开化' }]，//从后台选择人物3360 []，//存储所选人物isOpenItem: []，//控制各

初始化数据的主要目的。

1.根据数据为头像设置随机颜色；2.根据数据初始化一级全选按钮状态；3.根据数据初始化折叠面板的折叠状态；4.根据数据在第二级设置所选状态

initData() {//数据初始化//设置头像背景颜色让len=这个。工作清单。长度；用于(设I=0；我透镜；我){这个。SetHeadColor(这个。工作清单.成员，这个。head color)；//根据数据初始化全选按钮状态这个。是选择性的。push([])；这个$set(this.isSelectAll[i]，' group '，false)；这个$set(this.isSelectAll[i]，' child '，[])；//根据数据初始化折叠面板折叠状态这个。同祖细胞。push([])；这个$set(this.isOpenItem[i]，“group”，false)；这个$set(this.isOpenItem[i]，' child '，[])；//设置第二层级的状态用于(让j进入this.jobList[i].儿子){这个。是选择性的。孩子。推(假)这个。等长体[I]。孩子。推(假)这个。sethead颜色(这个。工作清单。儿子[j].成员，这个。head color)；} }}3.为父级绑定事件

全选框超文本标记语言。使用@click='checkAll(索引)'绑定全选事件，用于改变全选框的全选状态

div class=' CheckGrouP ' @ click=' CheckAll(索引)' @ click。stop I class=' icon font ' : class=' { ' icon-Gou Xuan ' :是全选[索引]是全选[索引]。组'图标-复选框第0轮' :是选择所有[索引]！是选择全部[索引].group}'/i/div全选框JS。通过改变选择所有[索引]中的组属性，来动态修改父级的选中状态。因为子级选项的数据这。选择人员是由v型绑定的，所有只需要对其进行增加和删除的操作，就可以改变子级每一项的选中状态

checkAll(索引){//父级的全选操作这个$set(this.isSelectAll[index]，' group '，this.isSelectAll[index].组);//改变当前按钮的选中状态if(！这个。作业列表[索引]。会员！这个。作业列表[索引]。son) { return } if(！this.isSelectAll[index].group) {//从全选=》 全不选用于(让键入this.isSelectAll[index].child) { //移除所有第二层级子项的选中状态这个$set(this.isSelectAll[index]).子、键、假);}对于(让i=0，len=这个。选择人员。长度；我透镜；i ) { if(！this.selectPeople[i]) { //删除干净了return } for(在this . JobList[索引]中让k .儿子){//循环删除有部门的人员（对应列表第三层级)用于(让j在this . JobList[索引]中。儿子k .成员){如果(这个。选择人[我]这个。选择人员.pid==this.jobList[index].儿子k .成员[j].PID){这个。选择人员。拼接(，1)；我-；打破；} } }用于(让j在this . JobList[索引]中。成员){//循环删除没有部门的人员（对应列表第二层级)如果(这个。选择人[我]这个。选择人员.pid==this.jobList[index].成员[j].PID){这个。选择人员。拼接(，1)；我-；打破；} } } } else {//从全不选=》 全选用于(让键入this.isSelectAll[index].child) { //给所有第二层级子项添加选中状态这个$set(this.isSelectAll[index]).child，key，true)；}对于(让我输入this.jobList[index].成员){//循环添加没有部门的人员（对应列表第二层级)如果(这个。选择人员。包括(这。作业列表[索引]).成员[I]){//如果已经存在，就不用再进行添加继续；}这个。选择人员。推(这个。作业列表[索引].成员[I])；}对于(让我输入this.jobList[index].儿子){//循环添加有部门的人员（对应列表第三层级)用于(让j在this . JobList[索引]中。儿子[我]。成员){如果(这个。选择人员。包括(这。作业列表[索引]).儿子[我]。成员[j]){//如果已经存在，就不用再进行添加继续；}这个。选择人员。推(这个。作业列表[索引].儿子[我]。成员[j])；} } }}4.通过子级改变父级的选中状态

子级超文本标记语言。需要注意的是，这里面绑定了两次stateChanged事件，只是参数不同@click='stateChanged(index，j，k)'代表第二层级的子级@click='stateChanged(index，I)'代表第一层级的子级。

ul class=' item _ second ' v-show=' isOpenItem[index]isOpenItem[index].group ' div class=' item _ third ' v-for='(第二个，j)在item中。儿子' :键='秒。id ' div @ click=' checkSecondItem(index，j)' class=' item ' div class=' checkGrouP ' @ click=' checkSecondAll(index，j)' @ click。stop I class=' icon font ' : class=' { ' icon-Gou轩3:是选择所有[索引]是选择所有[索引]。子[j]，' icon-checkbox round 0 ' :为selectall[index]！是选择全部[索引].child[j]} '/I/div { { second。name } }/div ul class=' item _ fourth ' v-show=' isOpenItem[index]isOpenItem[index].child[j]' li v-for='(第三，k)秒。成员' :键='第三。PID ' input @ click='状态已更改(index，j，k)' type=' checkbox ' name=' school ' : id=' check '第三。PID ' v-model=' select people ' : value=' third ' label class=' content-wrap ' : for=' check ' third。PID ' class=' item _ img ' 3: style='子级JS。其中，状态已更改函数，通过传入的参数不同来判断当前属于哪一层级的数据设置第一级已检查函数，通过判断所有子级选项的选中状态来给第一层级添加选中状态。

stateChanged(index，I，j) { if (j！==未定义){ //如果有j值，代表第三层级数据如果(这个。选择人员。包括(这。作业列表[索引]).儿子[我]。成员[j]){//点击之前为选中状态这个$set(this.isSelectAll[index]).子，我，假);//改变父级按钮的选中状态为非选中状态这个$set(this.isSelectAll[index]，' group '，false)；//改变顶级按钮的选中状态为非选中状态} else {//点击之前为非选中状态//给父级添加选中状态用于(设k=0；k this.jobList[index].儿子[我]。k ) { if(！这个。选择人员。包括(这。作业列表[索引]).儿子[我]。成员this.jobList[index].儿子[我]。成员[k]！=this.jobList[index].儿子[我]。成员[j]) {//只要有其中一个未选中，就跳出循环，不给父级添加选中状态返回false } }此$set(this.isSelectAll[index]).孩子，我，真的);//改变父级按钮的选中状态为选中状态这个。已选中setfirst level，this.jobList[index]).儿子[我]。成员[j])；//给第一级添加选中状态} } else {//没有j值，第二层级数据如果(这个。选择人员。包括(这。作业列表[索引]).成员[I]){//点击之前为选中状态这个$set(this.isSelectAll[index]，' group '，false)；//改变父级按钮的选中状态为非选中状态} else {//点击之前为非选中状态这个。已选中setfirst level，this.jobList[index]).成员[I])；//给第一级添加选中状态} }}，setFirstLevelChecked(索引，数据){//给第一级添加选中状态用于(在this . JobList[索引]中让k .成员){ if(！这个。选择人员。包括(这。作业列表[索引]).成员[k])数据！=this.jobList[index].成员[k]) {//只要有其中一个未选中，就跳出循环，不给父级添加选中状态返回对于(让我输入this.jobList[index].儿子){//循环添加有部门的人员（对应列表第三层级)用于(让j在this . JobList[索引]中。儿子[我]。成员){ if(！这个。选择人员。包括(这。作业列表[索引]).儿子[我]。成员[j])数据！=this.jobList[index].儿子[我]。成员[j]) { //如果已经存在，就不用再进行添加返回false } } }此$set(this.isSelectAll[index]，' group '，true)；//改变第一级按钮的选中状态为选中状态}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。