菜单管理-如何默认展开全部节点
我有一个类似与菜单管理的界面，我希望在进入页面初始化时，就默认展开全部节点
使用了[pre]table-tree-column[/pre]标签，它在[pre]js/common.js[/pre]下定义
code：
[pre]
/**
* table-tree-column组件
*/
(function () {
var self = null;
Vue.component('table-tree-column', {
name: 'table-tree-column',
template: '\
<el-table-column :prop="prop" v-bind="$attrs">\
<template slot-scope="scope">\
<span @click.prevent="toggleHandle(scope.$index, scope.row)" :style="{ \'padding-left\': ((scope.row._level || 0) * 10) + \'px\' }">\
<i :class="[ scope.row._expanded ? \'el-icon-caret-bottom\' : \'el-icon-caret-right\' ]" :style="{ \'visibility\': hasChild(scope.row) ? \'visible\' : \'hidden\' }"></i>\
{{ scope.row[prop] }}\
</span>\
</template>\
</el-table-column>\
',
props: {
prop: {
type: String
},
treeKey: {
type: String,
default: 'id'
},
parentKey: {
type: String,
default: 'pid'
},
childKey: {
type: String,
default: 'children'
}
},
beforeCreate: function () {
self = this;
},
methods: {
hasChild: function (row) {
return (_.isArray(row[self.childKey]) && row[self.childKey].length >= 1) || false;
},
// 切换处理
toggleHandle: function (index, row) {
if (!self.hasChild(row)) {
return false;
}
var data = self.$parent.store.states.data.slice(0);
data[index]._expanded = !data[index]._expanded;
if (data[index]._expanded) {
row[self.childKey].forEach(function (item) {
item._level = (row._level || 0) + 1;
item._expanded = false;
})
data = data.splice(0, index + 1).concat(row[self.childKey]).concat(data);
} else {
data = self.removeChildNode(data, row[self.treeKey]);
}
self.$parent.store.commit('setData', data);
self.$nextTick(function () {
self.$parent.doLayout();
})
},
// 移除子节点
removeChildNode: function (data, pid) {
var pids = _.isArray(pid) ? pid : [pid];
if (pid.length <= 0) {
return data;
}
var ids = [];
for (var i = 0; i < data.length; i++) {
if (pids.indexOf(data[i][self.parentKey]) !== -1 && pids.indexOf(data[i][self.treeKey]) === -1) {
ids.push(data.splice(i, 1)[0][self.treeKey]);
i--;
}
}
return self.removeChildNode(data, ids);
}
}
});
})();
[/pre]
