iview的tree组件扩展，输入框可编辑，删除

最新推荐文章于 2024-05-28 09:52:52 发布

布依前端

最新推荐文章于 2024-05-28 09:52:52 发布

阅读量802

点赞数 1

文章标签： view design javascript 开发语言

本文链接：https://blog.csdn.net/qq_41444226/article/details/126402476

版权

本文展示了如何在Vue中实现一个Dropdown组件，并将其与Tree组件结合，用于树形结构的操作。Dropdown组件用于展示操作菜单，点击时触发事件传递选中项。在Tree组件的节点上，通过Dropdown提供新建、重命名、删除等操作，同时提供了自定义的删除确认对话框。整个示例详细地阐述了组件间的交互和事件处理。

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

效果图
在这里插入图片描述

1、子组件Dropdowns

<template>
    <Dropdown transfer transfer-class-name="tree-parent-dropdown" @on-click="handlerDropdown">
        <i class="icon icongengduo1 set-parent-plus" title="点击新增"></i>
        <DropdownMenu slot="list">
            <DropdownItem :name="item.key" v-for="(item, index) in actionList" :key="item.key">{{ item.title }}</DropdownItem>
        </DropdownMenu>
    </Dropdown>
</template>

<script>
export default {
    data () {
        return {

        }
    },
    props: {
        actionList: {
            type: Array,
            default: []
        }
    },
    methods: {
        handlerDropdown (val) {
            // console.log(val);
            this.$emit('selectItem', val)
        }
    }
}
</script>

<style lang="less">
    .set-parent-plus {
        font-size: 18px;
    }
</style>

2、父组件使用tree并h注入子组件

<Tree :data="treeData" :key="Math.random()" :render="renderContent" class="demo-tree-render"></Tree>
import Dropdowns from './Dropdowns'

3、完整js

<script>
    import Dropdowns from './Dropdowns'
    export default {
        name: "base-qrcode",
        components: { Dropdowns },
        data () {
            return {
                parentAction: [
                    {
                        key: 'subdirectory',
                        title: '新建子目录'
                    },
                    {
                        key: 'summarycode',
                        title: '目录汇总码'
                    },
                ],
                subAction: [
                    {
                        key: 'directorysummary',
                        title: '目录汇总码'
                    },
                    {
                        key: 'newsubdirectory',
                        title: '新建子目录'
                    },
                    {
                        key: 'rename',
                        title: '重命名'
                    },
                    {
                        key: 'move',
                        title: '移动'
                    },
                    {
                        key: 'delete',
                        title: '删除'
                    },
                ],
                treeData: [
                    {
                        title: '全部活码',
                        expand: true,
                        isEidt: false,
                        render: (h, { root, node, data }) => {
                            return h('span', {
                                style: {
                                    display: 'inline-block',
                                    width: '100%'
                                }
                            }, [
                                h('span', [
                                    h('Icon', {
                                        props: {
                                            type: 'ios-folder-outline'
                                        },
                                        style: {
                                            marginRight: '8px'
                                        }
                                    }),
                                    h('span', data.title)
                                ]),
                                h('span', {
                                    style: {
                                        display: 'inline-block',
                                        float: 'right',
                                        marginRight: '32px'
                                    }
                                }, [
                                    h(Dropdowns, {
                                        props: {
                                            actionList: this.parentAction
                                        },
                                        on: {
                                            selectItem: (val) => { 
                                                console.log('add', val);
                                                 if (val === 'subdirectory') this.append(data)
                                            }
                                        }
                                    })
                                ])
                            ]);
                        },
                        children: [
                            {
                                title: '配电箱巡检',
                                expand: true,
                                isEidt: false,
                                children: [
                                    {
                                        title: '配电箱巡检1-1',
                                        expand: true,
                                        isEidt: false
                                    },
                                    {
                                        title: '配电箱巡检1-2',
                                        expand: true,
                                        isEidt: false
                                    }
                                ]
                            },
                            {
                                title: '配电箱巡检2',
                                expand: true,
                                isEidt: false,
                                children: [
                                    {
                                        title: '配电箱巡检 2-1',
                                        expand: true,
                                        isEidt: false
                                    },
                                    {
                                        title: '配电箱巡检 2-1',
                                        expand: true,
                                        isEidt: false
                                    }
                                ]
                            }
                        ]
                    }
                ],
                buttonProps: {
                    type: 'default',
                    size: 'small',
                },
                inputNodeContent: "", // 输入框要修改的内容
                oldNodeName:""  // 修改前的TreeNode名称
            };
        },
        methods: {
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span', [
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h(`${ data.isEidt ? '' : 'span' }`, 
                        {
                            on: {
                                click: (event) => {
                                    // event.stopPropagation();
                                    // this.oldNodeName = data.title
                                    // this.$set(data, 'isEidt', true)
                                    // console.log(data, 8888);
                                }
                            }
                        }, data.title),
                        h( data.isEidt ? 'Input' : '', {
                            props: {
                                type: "text",
                                value: data.title,
                                autofocus: true,
                            },
                            style: {
                                width: '150px'
                            },
                            on:{
                                'on-change': event => {
                                    // 此处后期可修改数据交互
                                    data.title = event.target.value
                                    this.inputNodeContent = event.target.value
                                },
                                "on-blur": event => {
                                    this.$set(data, 'isEidt', false)
                                }
                            }
                        })
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                        h(Dropdowns, {
                            props: {
                                actionList: this.subAction
                            },
                            on: {
                                selectItem: (val) => {
                                    // this.append(data) 
                                    console.log(val, data, node, root, 6666);
                                    // 重命名
                                    if (val === 'rename') {
                                        this.oldNodeName = data.title
                                        this.$set(data, 'isEidt', true)
                                    }
                                    // 删除
                                    if (val === 'delete') this.removeTreeNode(root, node, data)
                                    // 新建子目录
                                    if (val === 'newsubdirectory') {
                                        this.append(data)
                                    }
                                }
                            }
                        })
                    ])
                ]);
            },

            // 新增节点
            append (data) {
                const children = data.children || [];
                children.push({
                    title: '示例',
                    expand: true
                });
                this.$set(data, 'children', children);
                this.$set(data, 'isEdit', true)
                this.$Message.success({ content: '目录新建成功', duration: 3 })
            },

            // 删除节点
            remove (root, node, data) {
                const parentKey = root.find(el => el === node).parent;
                const parent = root.find(el => el.nodeKey === parentKey).node;
                const index = parent.children.indexOf(data);
                parent.children.splice(index, 1);
            },

            // 自定义删除树节点
            removeTreeNode(root, node, data) {
                this.$Modal.confirm({
                    title:"提示",
                    content:`您确定将 “${data.title}” 删除吗？`,
                    onOk: () => {
                       const parentKey = root.find(el => el === node).parent;
                        const parent = root.find(el => el.nodeKey === parentKey).node;
                        const index = parent.children.indexOf(data);
                        parent.children.splice(index, 1);
                    },
                    onCancel: () => {}
                });
            },
        },
        mounted() {},
    };
</script>