elementUI 表格树使用 tableTree
效果图
一、load懒加载方式
1.页面
代码如下(示例):
<el-table
:data="tableData"
style="width: 100%;margin-bottom: 20px;"
:header-cell-style="{background:'rgba(250,250,250,1)',color:'#222222'}"
:row-style="{background:'rgba(255,255,255,1)',color:'rgba(96,98,102,1)'}"
row-key="id" //必须保证id唯一
border
lazy//懒加载
:load="load" //加载children数据 点击每行小三角展开时触发的方法
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" //'children':下一层数据的数组名称
@selection-change="handleSelectionChange"
>
<el-table-column prop="attributeName" label="类别" align="center">
<template slot-scope="scope">
{{ scope.row.name || '-' }}
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="address" label="操作" align="center">
<template slot-scope="scope">
<div class="handle-button">
<el-button v-if="scope.row.pid ===0" class="el-icon-folder-add" type="text" size="medium" @click="add(scope.row)" />
<el-button class="el-icon-edit" type="text" size="medium" @click="edit(scope.row)" />
<el-button class="el-icon-delete" type="text" size="medium" @click="deleteItem(0,scope.row)" />
</div>
</template>
</el-table-column>
</el-table>
2.load方法
load(tree, treeNode, resolve) {
selectMachineTypeChildren(tree.id).then(res => {//根据所点击行的id调接口获取第二层数据
if (res.code === 200) {
resolve(res.data.list)//渲染children数据
}
})
},
二、使用el-table-tree-column标签
1.页面
代码如下(示例):
<el-table :data="tableData"
:row-style="{background:'rgba(255,255,255,1)',color:'rgba(96,98,102,1)'}"
style="width: 100%;margin-bottom: 20px;"
:header-cell-style="{background:'rgba(250,250,250,1)',color:'#222222'}"
border
row-key="id"
node-key="id"
:default-expanded-keys="expandRowKey"> //默认展开的行
<el-table-tree-column fixed align="center" width="180" file-icon="" folder-icon="icon arrow-right"
prop="attributeName" //后台字段
label="类别"
levelKey="deep" //后台提供的层级数
parentKey="pid" //父层id
treeKey="id" //树id 必须唯一
child-key="childrens"> //childrens为后台提供的子级数组字段名
</el-table-tree-column>
<el-table-column label="操作" align="center" width="160px">
<template slot-scope="scope">
<div class="handle-button">
<el-button v-if="scope.row.deep != 3" class="el-icon-folder-add" type="text" size="medium" @click="add(scope.row)" />
<el-button class="el-icon-edit" type="text" size="medium" @click="edit(scope.row)" />
<el-button class="el-icon-delete" type="text" size="medium" @click="deleteItem(0,scope.row)" />
</div>
</template>
</el-table-column>
</el-table>
2.接口返回数据结构
三、注意
- 使用load方式:后台返回数据格式一层,点击每行小三角触发load方法,根据点击层的id调用后台接口获取子级数据,而后渲染到表格中。
- 使用el-table-tree-column方式:后台返回数据结构为多层,为全部数据,适合层级不多的情况,如果层级过多接口可能会慢,影响性能。