Tree 树形控件 添加增删改查功能

 

 <div class="block">

        <p>使用 scoped slot</p>

        <el-tree

          :data="data"

          show-checkbox

          node-key="id"

          default-expand-all

          :expand-on-click-node="false"

        >

          <span class="custom-tree-node" slot-scope="{ node, data }">

            <span>{{ node.label }}</span>

            <span>

              <el-button type="text" size="mini" @click="() => append(data)">

                Append

              </el-button>

              <el-button

                type="text"

                class="el-icon-edit"

                size="mini"

                @click.native="amend(data)"

                @keyup.native.enter="() => alter(data)"

              >

                重命名

              </el-button>

              <el-button

                type="text"

                size="mini"

                @click="() => remove(node, data)"

              >

                Delete

              </el-button>

            </span>

          </span>

        </el-tree>

      </div>

    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: {

//删除节点

  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);

    },

//修改文件夹名字

    amend(data) {

      this.$prompt("请输入要修改节点名称", "提示", {

        confirmButtonText: "确定",

        inputValue: data.label,

        cancelButtonText: "取消",

      }).then(({ value }) => {

        console.log(value, "value");

        this.$set(data, "label", value);

      });

    },

}zz