三级联动(hutu工具类的)

后端代码:

 //三级联动列表查询
    @RequestMapping("list")
    public Result getlist(){
        List<CompanyAddress> list = addressService.list();
        //配置,把你前端写在options里的给删了,在后端配置, 
        TreeNodeConfig treeNodeConfig = new TreeNodeConfig();
        treeNodeConfig.setIdKey("value");
        treeNodeConfig.setNameKey("label");
        treeNodeConfig.setParentIdKey("parentId");
        treeNodeConfig.setChildrenKey("children");
        treeNodeConfig.setDeep(3);

        //转换器
        //(含义:找出父节点为字符串的所有子节点,并递归查找对应的子节点,深度最多为3)
        List<Tree<String>> treeNodes = TreeUtil.build(list, "0", treeNodeConfig, (treeNode, tree) -> {
            tree.setId(treeNode.getAddressId() + "");
            tree.setParentId(treeNode.getParentId() + "");
            tree.setName(treeNode.getAddressName());
        });

        return Result.success(treeNodes);
    }

后端查到的数据:

前端代码:

<template>
  <div>
    <h1>三级联动</h1>
    <el-cascader
        v-model="value"
        :options="options"
        @change="handleChange"></el-cascader>
  </div>
</template>
<script>
export default {
  data(){
    return{
      value:[],
      options: [],
    }
  },
  methods: {
    //value是选中的地址id
    handleChange(value){
      console.log(value);
    },
    queryOnelist(){
      this.axios.post("http://localhost:8666/address/list").then(r=>{
        this.options = r.data.data;
      })
    }
  },
  created() {
    this.queryOnelist();
  }
}
</script>
<style>

</style>