1.使用update更改内容时，输入字段的过程中点回车，删除，空格等键都会导致自动退出编辑模式，有什么好办法可以解决这个问题吗？
2.还有就是使用delete删除的时候，如果下一行有内容展开，会自动收起，这又得如何解决？
具体代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>树形视图扩展</title>
<style>
body {
font-family: Menlo, Consolas, monospace;
color: #444;
}
.item {
cursor: pointer;
}
.bold {
font-weight: bold;
}
ul {
padding-left: 1em;
line-height: 1.5em;
list-style-type: dot;
}
</style>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<script type="text/x-template" id="item-template">
<li>
<div :class="{bold: isFolder}" @click="toggle" @dblclick="changeType">
<span v-if="up">{{ model.name }}</span>
<input v-else type="text" v-model="model.name" @click.stop>
<span v-if="isFolder">[{{ open ? '-' : '+' }}]</span>
<span class="bold" @click.stop="$emit('del', index)">[del]</span>
<span class="bold" @click.stop="upd">[update]</span>
</div>
<ul v-if="isFolder" v-show="open">
<item class="item" v-for="(item, index) in model.children" :key="index + item.name" :index="index" :model="item" @del="model.children.splice($event, 1)"></item>
<li class="add" @click="addChild">+</li>
</ul>
</li>
</script>
<p>树形结构</p>
<ul id="demo">
<item class="item" v-for="(model, index) in treeData" :key="index + model.name" :index="index" :model="model" @del="treeData.splice($event, 1)"></item>
</ul>
<script>
var data = [
{name: 'han'},
{name: 'wang'},
{
name: 'liu',
children: [
{name: 'zhang'},
{name: 'lu'}
]
}
];
Vue.component('item', {
template: '#item-template',
props: {
model: Object,
index: Number
},
相关分类