小惠珠哦

这个屌丝很懒，什么也没留下！

热门标签

Tree 树形控件添加增删改查功能_树形控件节点的增删改查

作者：小惠珠哦 | 2024-07-30 10:50:51

踩

树形控件节点的增删改查

<p>使用 scoped slot</p>

<el-tree

:data="data"

show-checkbox

node-key="id"

default-expand-all

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

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

</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)),

};

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小惠珠哦/article/detail/903372

Tree 树形控件 添加增删改查功能_树形控件节点的增删改查

Tree 树形控件添加增删改查功能_树形控件节点的增删改查