vue构建树结构

需要构建的数据：

"1.自然灾害 1.1 地震灾害 1.2 洪涝灾害 1.3森林火灾 1.4水库溃坝 "
"2.事故灾难 2.1 煤矿事故 2.2火灾事故 2.3 交通事故 2.4 燃气泄漏事故  " 
"3.公共卫生事故 " 
"4.公共安全事故 4.1 涉外突发事故

//构建树结构
function createNode(item) {
  return {
    value: item.value,
    label: item.text,
    title: item.title,
  };
}

function buildTree(items) {
  const result = [];
  // console.log("items---" + items);
  items.forEach((item) => {
    if (!item.value.includes(".")) {
      // 如果是顶级节点，则添加到结果数组中
      result.push(createNode(item));
    } else {
      // 如果不是顶级节点，则查找其父节点并添加到父节点的 children 数组中
      let parentValue = item.value.split(".")[0];
      // alert(parentValue)
      let parentNode = result.find((node) => node.value === parentValue);
      if (parentNode) {
        if (!parentNode.children) {
          parentNode.children = [];
        }
        parentNode.children.push(createNode(item));
      }
    }
  });
  return result;
}

直接使用el-tree-select
 

<el-col :span="12">
  <el-form-item prop="type" label="类型">
              <el-tree-select v-model="form.type" :data="typeOfAccidentTree"   
check-strictly :render-after-expand="false" style="width: 100%" />
</el-form-item>

最后页面的得到的就是