基于多选框和el-popover的二级联动数据

先来看样式

话不多说上代码（要求一二级有自己的唯一id）

<el-checkbox-group v-model="domainAllSelect">
          <template v-for="(item, idx) in domain">
            <

              :key="idx"
              placement="bottom"
              width="200"
              trigger="hover"
              v-if="item.children"
            >
              <div>
                <el-checkbox-group v-model="domainAllSelect">
                  <el-checkbox
                    :label="item2.id"
                    v-for="(item2, idx2) in item.children"
                    :key="idx2"
                    @change="(val) => domain2Check(val, item, item2)"
                    >{{ item2.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </div>
              <el-checkbox
                slot="reference"
                @change="(val) => domainCheck(val, item)"
                :key="idx"
                :label="item.id"
                >{{ item.name }}
              </el-checkbox>
            </el-popover>
            <el-checkbox
              v-else
              :key="idx"
              :label="item.id"
              @change="(val) => domainCheck(val, item)"
              >{{ item.name }}
            </el-checkbox>
          </template>
        </el-checkbox-group>

注意此处的el-popover只能用hover感觉是与click冲突了

domainAllSelect选中的一二级所有值

下面是domain的数据格式

下面是一二级change事件对想要数据的修改

我想要的数据格式是[{pid:'',ppid:[]}] pid为选中的一级 ppid为此一级下选中的二级数组

此处的type和str这些变量是因为我需要多个地方用到做的兼容 只是一个地方用可以修改一下

/* 筛选领域的2级菜单 */
    domain2Check(value, item, item2, type) {
      let str1 = "";
      let str2 = "";
      let str3 = "";
      /*  console.log("str: ", this[`${str1}`][`${str2}`]); */
      /* type==2是修改  */
      if (type == 2) {
        str1 = "editDomain";
        str2 = "selectedEditDomain";
        str3 = "editDomainAllSelect";
      } else {
        str1 = "searchForm";
        str2 = "selectedDomain";
        str3 = "domainAllSelect";
      }
      /* value为true是选中 */
      if (value) {
        let arr = [...this[`${str1}`][`${str2}`]];
        let status = true;
        arr.map((it) => {
          if (it.pid == item.id) {
            if (it.ppid && it.ppid.length > 0) {
              it.ppid.push(item2.id);
            } else {
              it.ppid = [item2.id];
            }
            status = false;
          }
          return it;
        });
        if (status) {
          this[`${str3}`] = [...this[`${str3}`], item.id];
          let obj = {
            pid: item.id,
            ppid: [item2.id],
          };
          arr.push(obj);
        }
        this[`${str1}`][`${str2}`] = arr;
      } else {
        let arr = this[`${str1}`][`${str2}`];
        arr.map((it) => {
          if (it.pid == item.id) {
            it.ppid = it.ppid.filter((itt) => {
              return itt != item2.id;
            });
            if (it.ppid.length == 0) {
              let status = this[`${str3}`].some((it2) => {
                return it2 == it.pid;
              });
              if (!status) {
                this[`${str3}`] = [...this[`${str3}`], it.pid];
              }
              delete it.ppid;
            }
          }
          return it;
        });
        this[`${str1}`][`${str2}`] = arr;
      }
      console.log(
        "this.editDomain.selectedEditDomain: ",
        this.editDomain.selectedEditDomain
      );
      console.log(
        " this.searchForm.selectedDomain: ",
        this.searchForm.selectedDomain
      );
    },
    /* 筛选领域的1级菜单 */
    domainCheck(value, item, type) {
      let str1 = "";
      let str2 = "";
      let str3 = "";
      /*  console.log("str: ", this[`${str1}`][`${str2}`]); */
      /* type==2是修改  */
      if (type == 2) {
        str1 = "editDomain";
        str2 = "selectedEditDomain";
        str3 = "editDomainAllSelect";
      } else {
        str1 = "searchForm";
        str2 = "selectedDomain";
        str3 = "domainAllSelect";
      }
      /* value为true是添加false是取消*/
      if (value) {
        let arr = [...this[`${str1}`][`${str2}`]];
        let status = true;
        arr.forEach((it) => {
          if (it.pid == item.id) {
            status = false;
          }
        });
        if (status) {
          let obj = {
            pid: item.id,
          };
          arr.push(obj);
        }
        this[`${str1}`][`${str2}`] = arr;
      } else {
        /* 判断当有子集存在父级不可取消 */
        this[`${str1}`][`${str2}`].forEach((it) => {
          if (it.ppid && it.pid == item.id) {
            this[`${str3}`].push(item.id);
          }
        });
        /* 过滤取消 */
        let arr = this[`${str1}`][`${str2}`].filter((it) => {
          if (!it.ppid) {
            return it.pid != item.id;
          } else {
            return it;
          }
        });
        this[`${str1}`][`${str2}`] = arr;
      }
    },