问题遇到的现象和发生背景
问题相关代码，
<template>
<div>
<div style="display:flex;">
<Card dis-hover style="width:60%;">
<Form style="display:flex;justify-content:space-between;">
<FormItem label='药理类别' :label-width='60'>
<Input v-model="form.leibie"></Input>
</FormItem>
<FormItem>
<Button @click="search">查询</Button>
</FormItem>
</Form>
<Table :data='dataSource' :columns='columnList'>
<template slot-scope="{ row, index }" slot="action">
<Button type="primary" size="small" style="margin-right: 5px" @click="editItem(row)">编辑</Button>
<Button type="primary" size="small" style="margin-right: 5px" @click="detail(row)">详情</Button>
<!-- <Button type="error" size="small" @click="remove(row,index)">删除</Button> -->
</template>
</Table>
</Card>
<Card dis-hover style="width:40%;margin-left:10px;">
<Form style="display:flex;justify-content:space-between;">
<FormItem label='药理名称' :label-width='60'>
<Input v-model="formDetail.name"></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="search">查询</Button>
<Button type="primary" @click="Import" style="margin-left:10px;">导入</Button>
</FormItem>
</Form>
<div class="core">
<div class="abs-zone" v-if="editZoneDisplayBoolean">
<div class="box">
<Input placeholder="Enter something..." style="width:200px" v-model="beforeSubmitNodeTitleString" />
<Button type="success" :style="{marginLeft:'5px'}" @click="submitNameEditFunc(1)">
<Icon type="md-checkmark" />
</Button>
<Button type="error" :style="{marginLeft:'5px'}" @click="submitNameEditFunc(0)">
<Icon type="md-close" />
</Button>
</div>
</div>
<Tree :data="data5" :render="renderContent"></Tree>
</div>
</Card>
</div>
</div>
</template>
<script>
export default {
name:'pharmacologyCategory',
data() {
return {
form:{
leibie:''
},
formDetail:{
name:'',
},
dataSource:[
{
Code:'0001',
YLleibie:'类别一'
},
{
Code:'0002',
YLleibie:'类别二'
},
],
columnList:[
{
title:'编码',
key:'Code'
},
{
title:'药理类别',
key:'YLleibie'
},
{
title:'操作',
slot:'action'
},
],
root:null,
editZoneDisplayBoolean:false,
beforeSubmitNodeTitleString:'',
edit_root:null,
edit_node:null,
edit_data:null,
data5: [
{
title: '药典',
expand: true,
render: (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('span', data.title)
]),
h('span', {
style: {
display: 'inline-block',
float: 'right',
marginRight: '32px'
}
}, [
h('Button', {
props: Object.assign({}, this.buttonProps, {
icon: 'ios-add',
type: 'primary'
}),
style: {
width: '25px',
marginLeft:'25px',
marginRight: '8px'
},
on: {
click: () => {
// this.$Modal.confirm({
// scrollable: true,
// closable: true,
// loading: true,
// width: 800,
// cancelText:'',
// okText:"11"
// })
this.data5.push({
title: 'item',
expand: true,
})
// this.append(data)
}
}
}),
// h('Button', {
// props: Object.assign({}, this.buttonProps, {
// icon: 'md-remove'
// }),
// style: {
// marginRight: '8px'
// },
// on: {
// click: () => {
// // this.remove(root, node, data)
// console.log(123,'------------------')
// }
// }
// }),
// h('Button', {
// props: Object.assign({}, this.buttonProps, {
// icon: 'ios-create'
// }),
// style: {
// marginRight: '8px'
// },
// on: {
// click: () => { this.openEditName(root, node, data) }
// }
// }),
])
]);
},
children: [
]
}
],
buttonProps: {
type: 'default',
size: 'small',
}
}
},
created(){
},
computed:{
},
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('span', data.title)
]),
h('span', {
style: {
display: 'inline-block',
float: 'right',
marginRight: '32px'
}
}, [
h('Button', {
props: Object.assign({}, this.buttonProps, {
icon: 'ios-add'
}),
style: {
marginLeft: '80px',
marginRight: '8px'
},
on: {
click: () => { this.append(data) }
}
}),
h('Button', {
props: Object.assign({}, this.buttonProps, {
icon: 'ios-remove'
}),
style: {
marginRight: '8px'
},
on: {
click: () => { this.remove(root, node, data) }
}
}),
h('Button', {
props: Object.assign({}, this.buttonProps, {
icon: 'ios-create'
}),
style: {
marginRight: '8px'
},
on: {
click: () => { this.openEditName(root, node, data) }
}
}),
// h('Button', {
// props: Object.assign({}, this.buttonProps, {
// icon: 'ios-arrow-round-up'
// }),
// on: {
// click: () => { this.toUp(root, node, data) }
// }
// })
])
]);
},
append (data) {
const children = data.children || [];
children.push({
title: 'item',
expand: true
});
this.$set(data, 'children', children);
},
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);
},
toUp (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);
const children = parent.children
children.unshift({
...data
});
children.pop()
this.$set(parent, 'children', children);
},
openEditName (root, node, data) {
this.editZoneDisplayBoolean = true
this.edit_root = root
this.edit_node = node
this.edit_data = data
this.beforeSubmitNodeTitleString = this.edit_node.node.title
},
submitNameEditFunc(x){
if (!x) {
this.editZoneDisplayBoolean = false
return
} else {
this.edit_node.node.title = this.beforeSubmitNodeTitleString
this.editZoneDisplayBoolean = false
return
}
},
REMOVE(index){
},
search(){
console.log(this.data5)
},
Import(){},
detail(info){
},
editItem(info){
}
},
}
</script>
<style lang="less" scoped>
@edit-zone-height:32px;
.core{
width: 100%;
height: 400px;
border:1px solid #979797;
border-radius: 5px;
padding: 10px;
overflow: hidden;
position:relative;
.abs-zone{
position: absolute;
width: 100%;
height: 100%;
top:0;
left: 0;
background: rgba(255,255,255,.8);
z-index: 1;
.box{
position:absolute;
width: 100%;
top:50%;
left: 0;
margin-top: -@edit-zone-height;
text-align: center;
}
}
}
</style>
运行结果及报错内容
点击新增的一级节点中删除按钮会报错：vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read properties of undefined (reading 'node')和vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'node')"两个
我的解答思路和尝试过的方法
我想要达到的结果
根节点也可以添加删除
