vue elment 树形节点添加删除按钮重点在css

最新推荐文章于 2024-06-05 22:15:00 发布

前端方程

最新推荐文章于 2024-06-05 22:15:00 发布

阅读量672

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_44040867/article/details/118655903

版权

vue 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<template>
  <div class="custom-tree-container">
    <el-tree
      :data="data"
      show-checkbox
      node-key="id"
      default-expand-all
      :expand-on-click-node="false"
      :render-content="renderContent"
    >
    </el-tree>
  </div>
</template>

<script>
let id = 1000;

export default {
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1",
              },
              {
                id: 10,
                label: "三级 1-1-2",
              },
            ],
          },
        ],
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1",
          },
          {
            id: 6,
            label: "二级 2-2",
          },
        ],
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1",
          },
          {
            id: 8,
            label: "二级 3-2",
          },
        ],
      },
    ];
    return {
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data)),
    };
  },

  methods: {
    append(data) {
      // const newChild = { id: id++, label: 'testtest', children: [] };
      // if (!data.children) {
      //   this.$set(data, 'children', []);
      // }
      // data.children.push(newChild);
      console.log(1);
    },

    remove(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex((d) => d.id === data.id);
      children.splice(index, 1);
    },

    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span class="btns">
            <el-button
              size="mini"
              type="text"
              on-click={() => this.append(data)}
            >
              <i class="el-icon-edit"></i>
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              <i class="el-icon-delete"></i>
            </el-button>
          </span>
        </span>
      );
    },
  },
};
</script>

<style lang="less" scoped>
.el-tree {
  width: 400px;
}
::v-deep .custom-tree-node{
  width: 100%;
    display: flex;
      justify-content: space-between;
      .btns{
        display: none;
        margin-right:20px ;
        .el-button{
          margin: 0 10px;
        }
      }
}
::v-deep .el-tree-node__content:hover .btns{
  display: inline-block;
}
</style>