vue+element级联选择器(选择任意一级选项)

页面效果

页面代码：

添加v-if 判断是为了在添加中显示，而修改时隐藏，由于第一次学习写vue，只能使用比较笨的方式

 

下面实现步骤

export default {
  name: "ProductSplm",
  data() {
    return {
      parentData: [],
      parentId: "",
      optionProps: {
        value: "id",
        label: "name",
        children: "children",
        checkStrictly: true
      },
    };
  },

 

这里的children是后台查询出来的所有子类

我在初始化时就加载了查询全部的方法

created() {
    this.queryData();
    this.getTsplmList();
  },

并在查询时，使用异步方法把查询出来的数据放到options中

为了更好的判断用户选择的是哪个子集，这里添加了findidfromArray方法，因为我后台是children显示的子类数据，所以需要一层层查找

findIdformArray(id, list) {
      let obj = null;
      const arr = [];

      const fn = (data) => {
        data.forEach((p) => {
          if (p.id === id) {
            obj = p;
          } else if (p.children && p.children.length > 0) {
            fn(p.children);
          }
        });
      };
      fn(list);
      if (obj) {
        arr.splice(0, 0, obj.id);
        if (obj.parentId) {
          const arr1 = this.findIdformArray(obj.parentId, list);
          arr1 &&
            arr1.forEach((p) => {
              arr.splice(0, 0, p.id);
            });
        }
      }
      return arr;
    },

添加时调用这个方法，把最后一个id传给后台，如果没有选择父类，就传空值

由于修改时做了限制，不需要进行调用，如果需要调用，方法是差不多的，例如：

后台代码

后台service层中查询时进行了构建

@Transactional(readOnly = true, propagation = Propagation.SUPPORTS)
     public List getTsplmList() {
         List all = tsplmMapper.selectAll();
         return getTSplmListByParentid(all,"",0);
     }

private List getTSplmListByParentid(List list, String parentId,int lev){
         List newlist = list.stream().filter(p->parentId.equals(p.getParentId())).collect(Collectors.toList());
         List remainList = list.stream().filter(p->!parentId.equals(p.getParentId())).collect(Collectors.toList());
         if(newlist==null || newlist.size() ==0){
             return null;
         }
         for (TSplm splmTreeVo : newlist) {
             splmTreeVo.setLevel(lev+1);
             splmTreeVo.setChildren(getTSplmListByParentid(remainList,splmTreeVo.getId(),lev+1));
        }
         return newlist;
     }

总结

后台我使用的是springcloud框架，这个框架已经进行过封装，只需要简单的调用