element-plus Tree 的简单实现方式

最新推荐文章于 2024-08-09 18:44:09 发布

一个搞node的帅比

最新推荐文章于 2024-08-09 18:44:09 发布

阅读量394

点赞数 9

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ppsncm/article/details/136253576

版权

本文介绍了如何在Vue应用中使用ElementUI的El-Card组件构建一个可展开的树形结构，展示了数据绑定和层级控制的基本概念。

摘要由CSDN通过智能技术生成

<template>
  <el-card
    ><div class="box">
      <div class="top">
      </div>
      <div class="aside">
        <el-tree :data="data" :props="defaultProps" accordion>
          <template #default="{ node, data }">
            <img
              src="../../image/file.png"
              style="width: 16px; height: 16px"
              v-if="node.level === 1"
            />
            <img
              src="../../image/wenjian.png"
              style="width: 16px; height: 16px"
              v-if="node.level === 2"
            />
            <span @click="getNode(node)">{{ node.label }}</span>
          </template></el-tree
        >
      </div>
      <div class="main">333</div>
    </div>
  </el-card>
</template>

<script setup>
const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
      },
      {
        label: "Level two 2-2",
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
      },
      {
        label: "Level two 3-2",
      },
    ],
  },
];
const defaultProps = {
  children: "children",
  label: "label",
};
const getNode = (node) => {
  if (node.level === 2) {
    console.log(node);
  }
};
</script>
<style scoped>
.el-card {
  width: 100wh;
  height: 100%;
  /* background-color: chartreuse; */
}
.top {
  width: 100%;
  height: 250px;
  background-color: blueviolet;
}
.aside {
  width: 50%;
  height: 520px;
  background-color: rgb(32, 163, 65);
}
.main {
  width: 50%;
  height: 520px;
  background-color: rgb(190, 125, 40);
}
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  background-color: cornflowerblue;
  flex-wrap: wrap;
}
</style>