前军教程网

Avue 是一个基于Element框架低代码前端框架，它使用 JSON 配置来生成页面，可以减少页面开发工作量，极大提升效率。

使用avue-crud组件开发页面时，可能会用到Tree树形选择框，同时可能会有这样的需求：子节点选中时，同时也需要显示父节点名称，即多层显示。查看了官方文档，并没有直接的解决方案。

有说可以替换成Cascader级联选择器，但不符合实际需求。根据这种情况，有一个解决方案可供大家参考。

可以对数据字典进行处理，给每个孩子节点添加一条属性，表示父级关系，例如：allLevel: "四川-乐山"，然后再调用typeformat属性，处理节点要显示的内容。

代码示例

<script>
export default {
  data() {
    return {
      option: {
        column: [
          {
            label: "树型选择框",
            prop: "tree",
            type: "tree",
            parent: false,
            dicData: [
              {
                label: "四川",
                value: 0,
                children: [
                  {
                    label: "成都",
                    value: 2,
                    allLevel: "四川-乐山",
                  },
                  {
                    label: "绵阳",
                    value: 3,
                    allLevel: "四川-乐山",
                  },
                  {
                    label: "乐山",
                    value: 4,
                    allLevel: "四川-乐山",
                  },
                ],
              },
              {
                label: "广东",
                value: 1,
                children: [
                  {
                    label: "广州",
                    value: 5,
                    allLevel: "广东-广州",
                  },
                  {
                    label: "佛山",
                    value: 6,
                    allLevel: "广东-佛山",
                  },
                  {
                    label: "湛江",
                    value: 7,
                    allLevel: "广东-湛江",
                  },
                ],
              },
            ],
            typeformat(item, label, value) {
              return item.allLevel;
            },
          },
        ],
      },
    };
  },
};
</script>

效果图

如果大家有其它想法，欢迎在评论区分享！