<div id="app">
<el-table ref="tabletree" size="mini"
:data="data"
:height="tableheight"
row-key="code"
border
v-loading="loading"
lazy
:load="list"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column prop="name" label="名称" width="300" header-align="center">
<template slot="header">
名称
<el-link type="primary" v-on:click="fold" style="float:right;">折叠全部</el-link>
</template>
</el-table-column>
<el-table-column prop="code" label="代码" width="100" align="center"></el-table-column>
<el-table-column width="200" align="center">
<template slot="header" slot-scope="scope">
<el-link type="primary" v-on:click="addRoot">新建根项</el-link>
</template>
<template slot-scope="scope">
<el-button-group>
<el-link type="primary" v-on:click="addChild(scope.row)">新建子项</el-link>
<el-link type="warning" v-on:click="edit(scope.row)">修改</el-link>
<el-link type="danger" v-on:click="del(scope.row.code)">删除</el-link>
</el-button-group>
</template>
</el-table-column>
<el-table-column></el-table-column>
</el-table>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
data: [],
loading: false,
tableheight: 500
}
},
methods: {
list(tree, treeNode, resolve) {
var that = this;
this.loading = true;
$.post('/admin_areas/code/listXzqh', { parentcode: tree ? tree.code : null }, function (res) {
accecpResult(res, function () {
if (treeNode) {
resolve(res.data);
} else {
that.data = res.data;
}
that.loading = false;
})
})
},
fold() {
var els = this.$el.getElementsByClassName('el-table__expand-icon el-table__expand-icon--expanded')
for (var i = 0; i < els.length; i++) {
els[i].click()
}
},
addRoot() {
},
addChild(row) {
},
edit(row) {
},
del(code) {
}
},
mounted() {
this.list();
this.$nextTick(function () {
this.tableheight = window.innerHeight - 10;
var self = this;
window.onresize = function () {
self.tableheight = window.innerHeight - 10;
}
})
}
});
</script>
注：
1、hasChildren属性必须，children也必须，不过可以通过tree-props设置属性名称
2、list方法中判断treeNode是否为undifined来确定是初次加载还是展开后加载，初次加载要赋值，展开后加载需使用resolve加入数据。
3、实测中，expand-change事件触发不了，toggleRowExpansion方法也不可用，百度后得知触发箭头图标的点击事件即可，因此在fold方法中通过已展开的图标样式类名查找，然后模拟点击
