将JSON数据转为elementUI的el-tree组件使用的数据

7 篇文章 0 订阅
1 篇文章 0 订阅

element提供了el-tree组件,用于展示树形数据,必须为组件提供一个data属性,表示要展示的数据源。data数据的格式为
一个数组,数组的每一个项是一个对象,表示展示树的每一项;
每个对象中必须有一个label属性,
可以没有children属性,它是这个项下的子树,children必须是一个数组,数组的每项是一个展示项。

 data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{
              label: '三级 1-1-1'
            }]
          }]
        },
        。。。
        ]

将一个对象或数组转为一个tree组件能使用的data数据,最后返回一个数组
判断传入的是一个引用类型数据还是一个基本类型数据;
如果是引用类型数据,就遍历它,再判断每个项是对象还是数组,分别进行处理,就是不断递归
如果是基本类型数据,那就没有children,直接拼一个label

    transformToTreeData(obj) { // 返回数组,数组的每个项每个项必须是一个对象,对象必须有一个label属性,children属性必须是一个数组
      const treeArr = [];
      if (typeof obj === 'object') {
        for (const key in obj) {
          if (Object.prototype.hasOwnProperty.call(obj, key)) {
            if (Object.prototype.toString.call(obj[key]) === '[object Array]') {
              const arr = obj[key];
              const children = [];
              for (let i = 0; i < arr.length; i++) {
                const arrItem = arr[i];
                children.push({
                  label: i + 1,
                  children: this.transformToTreeData(arrItem)
                });
              }
              const item = {
                label: key,
                children
              };
              treeArr.push(item);
            } else if (
              Object.prototype.toString.call(obj[key]) === '[object Object]'
            ) {
              const item = {
                label: key,
                children: this.transformToTreeData(obj[key])
              };
              treeArr.push(item);
            } else {
              const val = key + ' : ' + obj[key];
              treeArr.push({ label: val });
            }
          }
        }
      } else {
        treeArr.push({
          label: obj
        });
      }
      return treeArr;
    },
Element UI库,`el-select` 和 `el-tree` 都是非常常用的数据展示组件。如果你想在 `el-select` 选择 `el-tree` 的层级数据,可以按照以下步骤操作: 1. **准备数据**:首先,你需要有一个树状结构的数据,包括节点的ID、名称以及父节点ID。例如: ```json { "data": [ { "id": "1", "name": "根节点", "children": [ { "id": "2", "name": "子节点1", "parent": "1" }, { "id": "3", "name": "子节点2", "parent": "1" } ] } ] } ``` 2. **设置el-tree**:在Vue组件初始化`el-tree`,传入你的层级数据,并监听`node-click`事件处理节点的选择: ```html <el-tree :data="treeData" node-key="id" default-expand-all @node-click="handleNodeClick" ></el-tree> ``` 3. **处理选节点**:在`handleNodeClick`函数里,你可以获取到用户点击的节点,然后在这个节点下添加或更新`el-select`的数据选项: ```javascript methods: { handleNodeClick(node) { this.selectedNode = node; // 更新选的节点 const options = this.getSelectOptions(node); // 根据节点生成select选项 this.selectOptions = options; }, getSelectOptions(node) { return node.children.map(child => ({ value: child.id, label: child.name })); } } ``` 4. **配置el-select**:创建一个`el-select`,绑定`v-model`到`selectedNode`,并显示`selectOptions`作为选项列表: ```html <el-select v-model="selectedNode" placeholder="请选择"> <el-option v-for="(option, index) in selectOptions" :key="index" :label="option.label" :value="option.value" ></el-option> </el-select> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值