ElementUI的表格树（树型结构表格），很简单⽅式，el-table只
需要⼩⼩改动⼏个地⽅
效果：
在el-table中，⽀持树类型的数据的显⽰。当 row 中包含children字段时，被视为树形数据。渲染树形数据时，必须要指定row-key。⽀持⼦节点数据异步加载。
设置 Table 的lazy属性为 true 与加载函数load。通过指定 row 中的hasChildren字段来指定哪些⾏是包含⼦节点。children与hasChildren都可以通过tree-props配置。
default-expand-all属性表⽰默认展开，不需要展开可以删除。row-key="id" 和 row⾥⾯的属性有children字段(即数据⾥⾯需要有children字段) 是必须的，:tree-props="{children: 'children',hasChildren: 'hasChildren'}可有可⽆。
如果不是懒加载的话，后端不要设置hasChildren这个属性，要不然不能树形显⽰；如果是懒加载，则需要设置hasChildren字段。
下⾯是vue的表格树：
<el-table
:data="items"
row-key="id"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
>
<el-table-column label="部门名称（编码）" width="200">
<template slot-scope="scope">{{ w.bmwh1.name }} ({{ de }})</template>
</el-table-column>
<el-table-column label="更新于" width="240">
<template slot-scope="scope">{{ w.bmwh1.updatedAt }}</template>
</el-table-column>
<el-table-column label="上级部门名称（编码）">
<template
slot-scope="scope"
>{{ w.bmwh1.pid==null?'':`${w.bmwh2.name}(${ de})` }}</template>
</el-table-column>
<el-table-column label="是否启⽤">
<template slot-scope="scope">
<el-switch
v-model="able"
@change="onenable($w.bmwh1 )"
/>
</template>
</el-table-column>
</el-table>
<script>
import {
element表格横向滚动条get as httpGet,
PAGE_SIZE
} from '@/request';
export default {
data() {
return {
items: [],
pageSize: PAGE_SIZE,
total: 1
};
},
created() {
},
methods: {
onCurrentChange(page) {
httpGet(`/iron/bmwh/?page=${page}&size=${PAGE_SIZE}`)
.then(rst => {
this.items = rst.items;
})
.
catch(e => this.$(e.message));
}
}
后端视图层：
public class Bmwhs implements Serializable {
private int id;
private Bmwh bmwh1;
private Bmwh bmwh2;
private List<Bmwhs> children;
...........
}
接下来需要做的事就是把所有的下级部门视图层封装到最上级部门的children视图层集合属性⾥⾯就可以了。
总结：
⼀、注意需要在前端表格⾥⾯改的是：
:tree-props可以不写，会有默认值。
⼆、后端主要改的是：
（1）视图层⾥⾯加⼊视图层集合属性，注意要命名为children（根据:tree-props="{children: 'children', hasChildren: 'hasChildren'}中设置的来定义，如果不想⽤children，则可以设置children: 'sons'等等，这时候后端数据封装也得是同名），这样前端才能渲染成树型结构。如果不是懒加载，后端不要封装hasChildren字段，要不然不能渲染成树形结构。
（2）controller层⾥⾯需要做的是：把所有下级部门的视图层----封装到----最上级部门视图层的children集合。
--------====下⾯不重要====-------------
下⾯只是例⼦，不重要根据⾃⼰的要求来写⾃⼰⼆（2）的东西。children放空集合也⾏，不⽤像下⾯放null

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。