vue element 实现 多个单选、分类联动。类似级联选择器（2）

<el-form size="medium" label-width="85px" class="retail-form" label-position="right">
      <el-form-item v-for="(item, index) in allShowData" :key="index" label="产品类别：">
        <el-radio-group v-model="item.isCheckeVal" @change="classChange($event,item)">
          <el-radio-button label="0">全部</el-radio-button>
          <!-- &&(item.level<=(radioChooseLevel)) -->
          <el-radio-button v-for="(childItem, childIndex) in item.value" v-if="item.level<=(radioChooseLevel+1)" :key="childIndex" :label="childItem.Id">{{ childItem.Name }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>

data() {
    return {
      allData: [
        { 'Id': 1, 'Pid': 0, 'Name': 'CCCF自愿1', 'Dep': 7, 'Level': 1, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 2, 'Pid': 0, 'Name': 'CCCF自愿2', 'Dep': 9, 'Level': 1, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 3, 'Pid': 0, 'Name': 'CCCF自愿3', 'Dep': 8, 'Level': 1, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 4, 'Pid': 1, 'Name': '防火材料', 'Dep': 7, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 5, 'Pid': 1, 'Name': '建筑耐火', 'Dep': 7, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 6, 'Pid': 1, 'Name': '消防防烟排烟', 'Dep': 7, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 7, 'Pid': 2, 'Name': '防火材料', 'Dep': 9, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 8, 'Pid': 2, 'Name': '建筑耐火构件', 'Dep': 9, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 9, 'Pid': 2, 'Name': '消防防烟排烟', 'Dep': 9, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 10, 'Pid': 3, 'Name': '消防防烟排烟', 'Dep': 8, 'Level': 2, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 11, 'Pid': 4, 'Name': '测试第三级1', 'Dep': 8, 'Level': 3, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 12, 'Pid': 5, 'Name': '测试第三级2', 'Dep': 8, 'Level': 3, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 13, 'Pid': 6, 'Name': '测试第三级3', 'Dep': 8, 'Level': 3, 'Remark': null, 'Sort': null, 'reserve_1': null },
        { 'Id': 14, 'Pid': 7, 'Name': '测试第三级4', 'Dep': 8, 'Level': 3, 'Remark': null, 'Sort': null, 'reserve_1': null }
      ],
      allShowData: [],
      radioChooseId: '0',
      radioChooseLevel: 0,
      }
  },
  watch: {},
  mounted() {
    this.allData = this.joinLevel(this.allData) // 原数据
    this.allShowData = JSON.parse(JSON.stringify(this.allData)) // 显示数据
  },
  methods: {
    classChange(eId, citem) {
      const nowEId = Number(eId)
      const nowItemLevel = Number(citem.level)
      // 如果点了全选而且不是点的第一排的全选
      if (nowEId === 0 && nowItemLevel !== 1) {
        this.tableFormatData.userTable.api.linkQuery.pid = this.allShowData[nowItemLevel - 2]['isCheckeVal']// 修改pid等于当前上一级的选中id
      } else {
        this.tableFormatData.userTable.api.linkQuery.pid = eId
      }
      this.radioChooseId = eId
      this.radioChooseLevel = nowItemLevel
      if (this.allShowData[nowItemLevel]) { // 如果level存在
        var rusult = []
        this.allData[nowItemLevel]['value'].map((aitem, aindex) => { // 遍历改变当前选中的那一行
          if (aitem.Pid === eId) {
            rusult.push(aitem) // 如果当前pid等于父级id才推入输入
          }
        })
        var nowAllShowData = JSON.parse(JSON.stringify(this.allShowData))
        nowAllShowData.map((nitem, nindex) => {
          if (nindex === nowItemLevel) {
            nitem.value = rusult // 把选中的那行给改变成筛选后的，
            nitem.isCheckeVal = 0 // 把当前level的下一个点中全选
          } else if (nindex > nowItemLevel) {
            nitem.value = [] // 如果不是当前的下一级，而是下一级的后面所有级就清空变成全选
            nitem.isCheckeVal = 0
          }
        })
        this.allShowData = nowAllShowData
      }
      this.filesSerch()  // 刷新列表
    },
    // 这是整理数据格式变成好判断的格式
    joinLevel(data) {
      const result = []
      const map = {}
      data.map(item => {
        if (!map[`${item.Level}`]) {
          map[`${item.Level}`] = [item]
        } else {
          map[`${item.Level}`]['push'](item)
        }
      })

      Object.keys(map).map(key => {
        result.push({
          level: key,
          isCheckeVal: 0,
          value: map[key]
        })
      })
      return result
    },
 }

其他实现方式：

其他实现方式：vue element 实现 多个单选、分类联动（1）