<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方法中通過已展開的圖標樣式類名查找,然後模擬點擊