我有一个在Vue中生成的树状视图表，带有用于扩展和折叠项目子项的按钮。
我试图弄清楚如何设置Vue过渡，以便在节展开和折叠时，它们的高度从该行的自然高度到从零开始的动画效果。
我已经尝试过用谷歌搜索的几种解决方案（例如使用 标签中的过渡名称，但是似乎都没有作用
new Vue({
el: '#tabletree',data: {
treedata: {
id: 0,desc: 'Item 1',children: [
{
id: 1,desc: 'Item 1-1',children: [
{ id: 2,desc: 'Item 1-1-1',children: [] }
]
},{
id: 3,desc: 'Item 1-2',children: [
{ id: 4,desc: 'Item 1-2-1',children: [] },{ id: 5,desc: 'Item 1-2-2',children: [] }
]
}
]
},hidden: []
},methods: {
toggle: function (id) {
if (this.hidden.indexOf(id) == -1)
this.hidden.push(id);
else
this.hidden.splice(this.hidden.indexOf(id),1);
},isVisible: function (ancestors) {
var vm = this;
return ancestors.every(function (a) {
return vm.hidden.indexOf(a) == -1;
})
}
},computed: {
datalist: function () {
var list = [];
var traverse = function (obj,level,ids) {
if (level == null) level = 0;
if (ids == null) ids = [];
obj.level = level;
obj.ancestors = ids;
list.push(obj);
var newIds = JSON.parse(JSON.stringify(ids));
newIds.push(obj.id)
obj.children.forEach(function (child) {
traverse(child,level + 1,newIds)
});
}
traverse(this.treedata);
return list;
}
}
});.nochildren {
visibility: hidden;
}
.toggle{
text-decoration: none;
width:10px;
display: inline-block;
text-align: center;
}
.expand-enter-active,.expand-leave-active {
transition: expand 0.2s;
max-height: auto;
}
.expand-enter,.expand-leave-to
{
max-height: 0px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="tabletree">
<table>
<tr v-for="row in datalist" v-if="isVisible(row.ancestors)">
<td :style="'padding-left:' + (row.level * 10) + 'px'">
<a :class="{'toggle':true,'nochildren':row.children.length == 0}" href="javascript://" v-on:click="toggle(row.id)">
<span v-if="hidden.indexOf(row.id) == -1">+</span>
<span v-if="hidden.indexOf(row.id) > -1">-</span>
</a>
<span>{{ row.desc }}</span>
</td>
</tr>
</table>
</div>0 个答案:
