table无限嵌套table

需要达到的效果：
table无限嵌套，需要达到：长度不确定，列数不固定，表头不一致

关键 ===> 组件自己调用自己，递归调用
在模板中使用name属性值，来调用自己
一、非懒加载
二、懒加载

一、非懒加载

<template><div v-if="'data' in tableData"><el-table:data="tableData.data"borderv-loading="tableData.tableLoading"style="width: 100%"><el-table-column type="expand"><template slot-scope="scope"><div v-if="scope.row.children.length == 0"></div><div v-else><table-nestedv-for="(item,i) in scope.row.children":key="i":tableData="item"/></div></template></el-table-column><el-table-columnv-for="(item,i) in tableData.columns":key="i":prop="item.prop":label="item.label":width="item.width*2"><templateslot="header"slot-scope="scope"><divclass="headerBox":title="item.label">{{item.label}}</div></template><template slot-scope="scope"><divclass="contentBox":title="scope.row[scope.column.property]">{{scope.row[scope.column.property]}}</div></template></el-table-column></el-table></div>
</template><script>
export default {name: 'TableNested',props: ['tableData']
}
</script><style lang="less" scoped>
/deep/.headerBox,
.contentBox {white-space: nowrap; /* 规定文本是否折行 */overflow: hidden; /* 规定超出内容宽度的元素隐藏 */text-overflow: ellipsis;
}
</style>

引用后，直接调用，然后传参

import TableNested from '@/components/TableNested' //table 递归
components: {TableNested
},
<TableNested :tableData="item" />

关于tableData的传值

this.tableTable = {name: null,columns: [{prop: 'name1',label: '表1',width: 100},{prop: 'name2',label: 'name2',width: 80},{prop: 'name3',label: 'name3',width: 80}],data: [{children: [{name: null,columns: [{prop: 'INC_LCCONT',label: '****(cont)',width: 100},{prop: 'CONTNO',label: 'CONTNO',width: 80},{prop: 'name2',label: 'name2',width: 80}],data: [{INC_LCCONT: '****表',children: [{name: null,columns: [{prop: 'INC_LCPOL',label: '保单险种信息表(pol)',width: 100},{prop: 'POLNO',label: 'POLNO',width: 80},{prop: 'CONTNO',label: 'CONTNO',width: 80}]}]}]},{name: null,columns: [{prop: 'D_MANAGECOM',label: '机构代码表(com)',width: 100},{prop: 'COMCODE',label: 'COMCODE',width: 80},{prop: 'COMNAME',label: 'COMNAME',width: 80}],data: [{children: [],D_MANAGECOM: '机构代码表'}]}]}]}

二、懒加载组件

<template><div v-if="'data' in tableData" style="height:100%"><el-table:data="tableData.data"border:height="tableData.height"v-loading="tableData.tableLoading"@expand-change="expandChange"style="width: 100%"><el-table-column type="expand" width="30"><template slot-scope="scope"><div v-if="scope.row.children.length == 0"></div><div v-else><TableNestedQv-for="(item,i) in scope.row.children":key="i":tableData="item":bigParams="item":objId="objId":fields="fields"style="width: 100%"/></div></template></el-table-column><el-table-columnv-for="(item,i) in tableData.columns":key="i":prop="item.prop":label="item.label":min-width="item.width*2":width="(tableData.columns.length+1)/100"><template slot="header" slot-scope="scope"><div class="headerBox" :title="item.label">{{item.label}}</div></template><template slot-scope="scope"><divclass="contentBox":title="scope.row[scope.column.property]">{{scope.row[scope.column.property]}}</div></template></el-table-column></el-table></div>
</template><script>
import { api } from '@/common/js/api'
import { tool } from '@/common/js/tool.js'
export default {name: 'TableNestedQ',props: ['listTreeLoading', 'ISTableNested', 'bigParams', 'objId', 'fields'],data() {return {tableData: []}},mounted() {if (this.ISTableNested) {this.getData()}this.tableData = this.bigParams},methods: {getData() {api.xxx.xxxxxxx(JSON.stringify(this.bigParams)).then(res => {if (res.code == '200') {for (const item of res.data.data) {item.id = tool.uuId(8, 8)item.alias = res.data.aliasitem.hasChildren = res.data.hasChildrenitem.children = []}res.data.height = '100%'this.tableData = res.datathis.tableData.columns.forEach(el => {el.width = this.nodeStyleConfig(el.label)el.title = el.labelel.field = el.prop})this.$emit('closeListTreeLoading')}}).catch(err => {this.$emit('closeListTreeLoading')})},//***************  关键  ***************expandChange(row, expanded) {if (expanded.length == 0) {return}let val_copy = JSON.parse(JSON.stringify(row))delete val_copy.childrenlet params = {mapper: {modelId: this.objId},sourceAlias: val_copy.alias,parentData: val_copy,fields: this.fields}const rLoading = this.openLoading()api.xxxx.get_children(params).then(res => {if (res.code == '200') {for (const item of res.data) {item.id = tool.uuId(8, 8)for (const itemIn of item.data) {itemIn.alias = item.aliasitemIn.hasChildren = item.hasChildrenitemIn.children = []}}for (const iterator of this.tableData.data) {iterator.children = res.data}rLoading.close()}}).catch(err => {rLoading.close()})}},watch: {bigParams: function(val) {if (this.ISTableNested) {this.getData()}}}
}
</script><style lang="less" scoped>
/deep/.headerBox,
.contentBox {// width: 150px;white-space: nowrap; /* 规定文本是否折行 */overflow: hidden; /* 规定超出内容宽度的元素隐藏 */text-overflow: ellipsis;
}
/deep/.el-table__expanded-cell[class*='cell'] {padding: 0px 0px 0px 30px;
}
/deep/.el-table__empty-block{min-height: 30px;
}
/deep/.el-table__empty-text{line-height: 30px;
}
</style>

table无限嵌套table相关推荐

antd 下拉框怎么联动_Antd的Table组件嵌套Table以及选择框联动操作
一.需求在使用Table组件嵌套Table时,父子Table的选择框需要联动,即父Table选中,该行下的子Table需要全选中,某一个子Table全部选中,则该子Table所在的父Table那一行 ...
table中嵌套table，如何用jquery来控制奇偶行颜色
总是要趁着自己还有记忆的时候,把该记录下来的都记录下来,着实是不敢恭维自己的记性. 相信很多时候,我们前端人员,经常会用到table里面的某个td中还嵌套着table,而这个时候还总要去弄奇偶行的颜色 ...
HTML中在table的td属性中嵌套table，为什么table居中？
我在表格table的td中又嵌套了一个table,但是table中的东西会呈现垂直居中的状态,那么问题是什么,是其table继承了vertical-align: inherit属性 vertical- ...
用正则表达式取出table中的所有行（支持嵌套table）
此是通过csdn询问得高人之手写的. 谢谢gzdiablo 表达式: <tr[^>]*>(?:(?:\s|\S)*?(?=<table|</tr>)(?(<t ...
【Oracle】record varray (associative array 关联数组) table (nested table type 嵌套表类型)和%type、%rowtype的使用详解
官方文档: https://docs.oracle.com/en/database/oracle/oracle-database/12.2/lnpls/plsql-data-types.html#GU ...
php无极分类非递归_PHP中的无限级分类、无限嵌套评论
php中文网最新课程每日17点准时技术干货分享一般来说,递归被称为函数自身的调用. 递归在开发中的实际运用 N级分类无限级的分类在平常的开发中是常见的需求,并且在不少面试题中都会碰到.不管你做什 ...
mysql create table()_MySQL Create Table创建表
表的创建命令需要: 表的名称字段名称定义每个字段(类型.长度等) 语法下面是通用的SQL语法用来创建MySQL表: CREATE TABLE table_name (column_name co ...
R语言使用table函数计算单分类变量的频率表（frequency table）、使用prop.table函数将table函数计算获得的频率表转化为比率表、返回单分类变量每一个类别的比率、或者百分比
R语言使用table函数计算单分类变量的频率表(frequency table).使用prop.table函数将table函数计算获得的频率表转化为比率表.返回单分类变量每一个类别的比率.或者百分比. ...
matlab如何创建table,table,matlab,中table数据类型,创建,调用,访问
MATLAB table数据结构目录: ?关于作者 ?table简介 o为什么需要table数据结构 o通过导入数据构造table对象 o调用table构造函数来构造table对象 o通过转换函数构 ...

table无限嵌套table

table无限嵌套table相关推荐

最新文章

热门文章