diff --git a/package/component/src/component/table/index.less b/package/component/src/component/table/index.less index ef2d650c..ec2540ac 100644 --- a/package/component/src/component/table/index.less +++ b/package/component/src/component/table/index.less @@ -465,11 +465,6 @@ box-shadow: inset -10px 0 8px -8px #00000026; } -.layui-table-view .layui-table tr th:last-child, -.layui-table-view .layui-table tr td:last-child { - border-right: none !important; -} - .layui-table-tool { position: relative; z-index: 890; diff --git a/package/component/src/component/table/index.vue b/package/component/src/component/table/index.vue index ab4d1fa7..f750a6c4 100644 --- a/package/component/src/component/table/index.vue +++ b/package/component/src/component/table/index.vue @@ -91,53 +91,101 @@ const hasChecked = ref(false); const tableDataSource = ref([...props.dataSource]); const tableColumns = computed(() => { return [...props.columns]; -}) +}); -const tableHeadColumns = ref([]) -const tableBodyColumns = ref([]) +const tableHeadColumns = ref([]); +const tableBodyColumns = ref([]); + +const getLevel = (arr: any[]) => { + let maxLevel = 0; + (function callBack(arr, level) { + ++level; + maxLevel = Math.max(level, maxLevel); + for (let i = 0; i < arr.length; i++) { + let item = arr[i]; + if (item.children && item.children.length > 0) { + callBack(item.children, level); + } else { + delete item.children; + } + } + })(arr, 0); + return maxLevel; +}; + +function getLeafCountTree(json: any) { + if (!json.children || json.children.length == 0) { + json.colspan = 1; + return 1; + } else { + var leafCount = 0; + for (var i = 0; i < json.children.length; i++) { + leafCount = leafCount + getLeafCountTree(json.children[i]); + } + json.colspan = leafCount; + return leafCount; + } +} const findFindNode = (columns: any[]) => { columns.forEach((column) => { - if(column.children) { + if (column.children) { findFindNode(column.children); } else { tableBodyColumns.value.push(column); } - }) -} + }); +}; -findFindNode(tableColumns.value) +findFindNode(tableColumns.value); const tableColumnKeys = ref([]); const findFindNodes = (columns: any[]) => { columns.forEach((column) => { - if(column.children) { + if (column.children) { findFindNodes(column.children); } else { - if(!column.hide) { + if (!column.hide) { tableColumnKeys.value.push(column.key); } } - }) -} + }); +}; -findFindNodes(tableColumns.value) +findFindNodes(tableColumns.value); /** * 处理为复杂表头, 待完成 - * - * @param level 层级, 用于决定会被 push 到的目标数组 + * + * @param level 层级, 用于决定会被 push 到的目标数组 */ const findFinalNode = (level: number, columns: any[]) => { - columns.forEach(column => { - if(column.children) { - // 设置 rowspan + columns.forEach((column) => { + if (column.children) { + // 设置 colspan + const colSpan = getLeafCountTree(column); + column.colspan = colSpan; + column.rowspan = 1; + if (!tableHeadColumns.value[level]) { + tableHeadColumns.value[level] = []; + } + tableHeadColumns.value[level].push(column); + findFinalNode(level + 1, column.children); } else { - // 设置 colspan + // 设置 rowspan + const rowSpan = getLevel(columns); + column.rowspan = rowSpan; + column.colspan = 1; + if (!tableHeadColumns.value[level]) { + tableHeadColumns.value[level] = []; + } + tableHeadColumns.value[level].push(column); } - }) -} + }); +}; + +findFinalNode(0, tableColumns.value); const tableSelectedKeys = ref([...props.selectedKeys]); const tableExpandKeys = ref([...props.expandKeys]); @@ -538,71 +586,80 @@ const renderTotalRowCell = (column: any) => { - - + + diff --git a/package/document-component/src/document/zh-CN/components/table.md b/package/document-component/src/document/zh-CN/components/table.md index 7a9dedc0..9608bfa2 100644 --- a/package/document-component/src/document/zh-CN/components/table.md +++ b/package/document-component/src/document/zh-CN/components/table.md @@ -1169,7 +1169,7 @@ export default { ::: demo 通过 `span-method` 属性, 自定义行列合并的逻辑。