element树状表格子级
1. 概述
Element树状表格子级组件是一个功能强大的表格组件，它支持多种特性，如数据分页、排序、过滤等。同时，它还支持树状表格，即表格中的一行可以展开，显示子行。
2. 特性
element表格横向滚动条数据分页：支持对表格数据进行分页，并提供分页控件，方便用户快速切换到不同页码。
排序：支持对表格数据进行排序，并提供排序控件，方便用户快速对数据进行排序。
过滤：支持对表格数据进行过滤，并提供过滤控件，方便用户快速筛选出所需数据。
树状表格：支持树状表格，即表格中的一行可以展开，显示子行。子行也可以继续展开，形成多级树状结构。
自定义渲染：支持自定义表格的渲染方式，方便用户根据自己的需求定制表格的外观和行为。
3. 使用方法
3.1 安装
npm install element-ui
3.2 导入
import { ElTreeGrid } from 'element-ui'
3.3 使用
<el-tree-grid
:data="tableData"
:columns="tableColumns"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"  :default-expand-all="true"
@row-click="handleRowClick"
/>
3.3.1 tableData
tableData是表格数据，它是一个数组，数组中的每个元素都是一个对象，对象中包含了表格中的一行数据。
3.3.2 tableColumns
tableColumns是表格列的配置，它是一个数组，数组中的每个元素都是一个对象，对象中包含了表格中的一列的配置信息。
3.3.3 tree-props
tree-props是树状表格的配置，它是一个对象，对象中包含了两个属性：children和hasChildren。children指定了子行的属性名，hasChildren指定了是否有子行的属性名。
3.3.4 default-expand-all
default-expand-all指定了是否默认展开所有的子行。
3.3.5 row-click
row-click是行点击事件，当用户点击表格中的某一行时，会触发该事件。
4. 示例
<template>
<el-tree-grid
:data="tableData"
:columns="tableColumns"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"    :default-expand-all="true"
@row-click="handleRowClick"
/>
</template>
<script>
import { ElTreeGrid } from 'element-ui'
export default {
components: { ElTreeGrid },  data() {
return {
tableData: [
{
id: 1,
name: 'John',
age: 30,
children: [
{
id: 11,
name: 'John Jr.',              age: 10
},
{
id: 12,
name: 'Jane',
age: 12
}
]
},
{
id: 2,
name: 'Mary',
age: 25,
children: [
{
id: 21,
name: 'Mary Jr.',              age: 5
}
]
}
],
tableColumns: [
{
prop: 'id',
label: 'ID'
},
{
prop: 'name',
label: 'Name'
},
{
prop: 'age',
label: 'Age'
}
]
}
},
methods: {
handleRowClick(row) {
console.log(row)
}
}
}
</script>

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