网站建设模板双人,运营管理,WordPress下载统计,c .net网站开发实例一、表格嵌套要求#xff1a;
两个表格嵌套#xff0c;当父表格有children数组时子表格才展示#xff1b;子表格数据少于父表格展示字段#xff0c;且对应固定操作列不同#xff1b;
二、嵌套问题#xff1a;
当使用el-table的typeexpand实现表格嵌套时#xff0c;样…一、表格嵌套要求
两个表格嵌套当父表格有children数组时子表格才展示子表格数据少于父表格展示字段且对应固定操作列不同
二、嵌套问题
当使用el-table的typeexpand实现表格嵌套时样式出现以下问题
展开图标每条数据都展示了实际上接口数据并不是都有children数组在表格嵌套后打开子表格高亮显示在经过子表格后对应不上父表格的操作列固定在右侧影响了子表格的显示滑动到表格底部时父子表格的固定列对不齐
修改前效果如下 修改后效果如下 三、代码实现
1、表格定义唯一值row-keyindexId和类名:row-class-namegetRowClass el-table:row-class-namegetRowClassreftablev-loadingtableLoadingsizeminiheight100%:datatableDatarow-keyindexIdtooltip-effectdark:header-cell-style{background: #f5f7fa,fontWeight: bold,color: #303133}expand-changeexpandChangeborderel-table-column typeexpandtemplate slot-scopeprops!-- 表格嵌套第二层 --el-tablerefsonTable:style{height: ${(props.row.children.length 1) * 36 1}px,width: 100%}row-keyindexId:dataprops.row.childrentooltip-effectdark:header-cell-style{background: #f5f7fa,fontWeight: bold,color: #303133}border !-- 子表格字段 --el-table-column XXX /el-table-column/el-table!-- 父表格字段 --el-table-column XXX /el-table-column/el-table2、类名判断 // 表格类名方法getRowClass({ row, rowIndex }) {// 把每一行的索引放进rowrow.index rowIndex// 判断当前行是否有子数据if (row.children null ||row.children undefined ||row.children.length 0) {return row-hidden-expand-icon} else {return row-show-icon}},
3、表格样式
style langscss scoped// 子表格覆盖右侧fix
::v-deep .el-table__body-wrapper {.el-table__expanded-cell {z-index: 100;}
}// 有子表格才显示展开箭头
:deep(.row-hidden-expand-icon) {td {:first-child {.el-icon {visibility: hidden;}}.el-table__expand-icon {pointer-events: none;}}
}// 去掉表格的第三、第四个单元格出现的展开图标
:deep(.el-table__row) {.el-table__cell {:nth-child(3),:nth-child(4) {.el-table__expand-icon {pointer-events: none;display: none;}}}
}// 子表格样式
:deep(.el-table__expanded-cell) {padding: 10px !important;
}// 修复hover高亮不同步
::v-deep .el-table__body tr.hover-row td.el-table__cell {background-color: transparent;
}::v-deep .el-table .el-table__row:hover {background-color: #f5f7fa;
}::v-deep .el-table__expanded-cell:hover {background-color: transparent;
}// 修复滚到下面对不齐
::v-deep .el-table__fixed-body-wrapper .el-table__body {padding-bottom: 12px;
}// 使得每一行都为36px高度
::v-deep .row-show-icon {td {:first-child {.cell {height: 24px;}}}
}
:deep(.el-table .el-table__cell) {height: 36px !important;
}
/style
