在vue的zm-tree-org组件中,我希望当我点击删除节点的时候能出现一个弹窗,点击确认则执行该组件的删除方法,点击取消则取消删除操作
时间: 2024-02-11 07:08:16 浏览: 119
您可以在 `zm-tree-org` 组件中添加一个删除节点的方法,并在该方法中调用弹窗组件(例如 `ElMessageBox`),代码示例如下:
```vue
<template>
<zm-tree-org
:data="treeData"
:props="treeProps"
:default-checked-keys="defaultCheckedKeys"
:default-expanded-keys="defaultExpandedKeys"
:render-content="renderContent"
@node-click="handleNodeClick"
/>
</template>
<script>
import { ElMessageBox } from 'element-ui';
import ZmTreeOrg from 'zm-tree-org';
import 'zm-tree-org/dist/styles.css';
export default {
components: { ZmTreeOrg },
data() {
return {
treeData: [
{
label: 'Node 1',
children: [
{ label: 'Leaf 1-1' },
{ label: 'Leaf 1-2' }
]
},
{
label: 'Node 2',
children: [
{ label: 'Leaf 2-1' },
{ label: 'Leaf 2-2' }
]
}
],
treeProps: {
children: 'children',
label: 'label'
},
defaultCheckedKeys: [],
defaultExpandedKeys: [],
};
},
methods: {
handleNodeClick(node) {
if (node.isLeaf) {
this.showDeleteConfirm(node);
}
},
showDeleteConfirm(node) {
ElMessageBox.confirm('此操作将永久删除该节点, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 点击确认后执行删除操作
this.deleteNode(node);
}).catch(() => {
// 点击取消后不执行删除操作
});
},
deleteNode(node) {
// 执行删除节点的操作
console.log('删除节点', node);
},
renderContent(h, { node, data }) {
return (
<span>
<span>{node.label}</span>
<span style="float: right; margin-right: 20px;">
<el-button type="text" onClick={() => this.showDeleteConfirm(node)}>
删除
</el-button>
</span>
</span>
);
},
},
};
</script>
```
在这个示例中,当用户点击节点的删除按钮时,会调用 `showDeleteConfirm` 方法显示一个确认删除的弹窗,如果用户点击确定,则会调用 `deleteNode` 方法执行删除操作,如果点击取消,则不执行删除操作。同时,为了让删除按钮显示在节点的右侧,我们在 `renderContent` 方法中渲染了自定义节点内容,并在该内容中添加了删除按钮。
阅读全文