Element-UI之树形表格(treetable&&treegrid)
Element-UI是一套基于Vue.js的UI组件库，提供了丰富的组件和功能。其中，树形表格(treet&&treegrid)是一种常用的组，用于展示具有层级关系的数据。本文将介绍如何使用Element-UI的树形表格组件，并提供两个例说明。
1. treetable和treegrid的区别
在Element-UI中，树形表格有两种实现方式：treetable和treegrid。它们的区别在于：
- treetable：每一行都可以展开子行，子行和父行在同一级别。
- treegrid：每一行都可以展子行，子行和父行在不同的级别。
2. 使用treetable实现树形表格
使用treetable实现树形表格的步骤如下：
- 引入treetable组件：
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column typeexpand"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
import { ElTable, ElTableColumn } from 'element-ui'
export default {
components: {
ElTable,
ElTableColumn
},
data() {
return {
tableData: [
{
name: '张三',
age: 18,
address: '北京市朝阳区',
children: [
{
name: '李四',
age: 20,
address: '北京市海淀区'
},
{
name: '王五',
age: 22,
address: '北京市西城区'
}
]
},
{
name: '赵六',
age: 25,
address: '北京市东城区'
}
]
}
}
}
</script>
上面的代码使用了treetable组件展示了一个包含层级关系的数据。
- 配置展开行：
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<div>
<el-table :data="props.row.children" style="width: 100%">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
上面的代码使用了type="expand"配置了展开行，并使用了slot-scope插槽自定义了展开行的内容。
3. 使用treegrid实现树形表格
使用treegrid实现树形表格的步骤如下：
- 引入treegrid组件：
<template>
<div>
<el-table :data="tableData" style="width: 100%" :tree-props="{ children: '', hasChildren: 'hasChildren' }">
<el-table-column type="expand"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
import { ElTable, ElTableColumn } from 'element-ui'
export default {
components: {
ElTable,
ElTableColumn
},
data() {
return {
tableData: [
{
name: '张三',
age: 18,
address: '北京市朝阳区',
hasChildren: true,
children: [
{
name: '李四',
age: 20,
address: '北京市海淀区',
hasChildren: false
},
{
name: '王五',
age: 22,
address: '北京市西城区',
hasChildren: false
}
]
},
{
name: '赵六',
age: 25,
address: '北京市东城区',
hasChildren: false
}
]
}
}
}
</script>
上面的代码使用了treegrid组件展示了一个包含层级关系的数据。
- 配置展开行：
<template>
<div>
<el-table :data="tableData" style="width: 100%" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column type="expand">
<template slot-scope="props">
<div>
<el-table :data="props.row.children" style="width: 100%" :tree-props="{ children: 'children', hasChildren: 'hasChildren }">
<el-table-column type="expand"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
上面的代码使用了type="expand"配置了展开行，并使用了slot-scope插槽自定义了展开行的内容。同时，使用了:tree-props配置了treegrid的相关属性。
4. 示例1：使用treetable实现树形表格
<template>
<div>
<el-table :data="tableData" style="width: 100%">
<el-table-column type="expand">
<template slot-scope="props">
<div>
<el-table :data="props.row.children" style="width: 100%">
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
import { ElTable, ElTableColumn } from 'element-ui'
export default {
components: {
ElTable,
ElTableColumn
},
data() {
return {
tableData: [
{
name: '张三',
age: 18,
address: '北京市朝阳区',
children: [
{
name: '李四',
age: 20,
address: '北京市海淀区'
},
{
name: '王五',
age: 22,
address: '北京市西城区'
}
]
},
{
name: '赵六',
age: 25,
address: '北京市东城区'
}
]
}
}
}
</script>
上面的代码使用了treetable组件展示了一个包含层级关系的数据。
5. 示例2：使用treegrid实现树形表格
<template>
<div>
<el-table :data="tableData" style="width: 100%" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
<el-table-column type="expand">
<template slot-scope="props">
<div>
<el-table :data="props.row.children" style="width: 100%" :tree-props="{ children: 'children', hasChildren: 'hasChildren }">
<el-table-column type="expand"></el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
</el-table-column>
<el-table-column prop="name" label="名称"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</div>
</template>
<script>
import { ElTable, ElTableColumn } from 'element-ui'
export default {
components: {
ElTable,
ElTableColumn
},
data() {
return {
tableData: [
{
name: '张三',
age: 18,
address: '北京市朝阳区',
hasChildren: true,
children: [
{
name: '李四',
age: 20,
address: '北京市海淀区',
hasChildren: false
},
{
name: '王五',
age: 22,
address: '北京市西城区',
hasChildren: false
}
]
},
{
name: '赵六',
age: 25,
address: '北京市东城区',
hasChildren: false
}
]
}
}
}
</script>
上面的代码使用了treegrid组件展示了一个包含层级关系的数据。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：element-ui之树形表格(treetable&&treegrid) - Python技术站
微信扫一扫 
支付宝扫一扫 