theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨(component): 新增 table 复杂表头实现

Browse Source
This commit is contained in:
就眠儀式 2022-08-08 03:19:11 +08:00
parent 8c9078b0fc
commit db1c78f458
3 changed files with 152 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package/component/src/component/table/index.less
View File

@ -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;

93
package/component/src/component/table/index.vue
View File

@ -91,10 +91,41 @@ const hasChecked = ref(false);
const tableDataSource = ref<any[]>([...props.dataSource]);
const tableColumns = computed(() => {
return [...props.columns];
})
});
const tableHeadColumns = ref<any[]>([])
const tableBodyColumns = ref<any[]>([])
const tableHeadColumns = ref<any[]>([]);
const tableBodyColumns = ref<any[]>([]);
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) => {
@ -103,10 +134,10 @@ const findFindNode = (columns: any[]) => {
} else {
tableBodyColumns.value.push(column);
}
})
}
});
};
findFindNode(tableColumns.value)
findFindNode(tableColumns.value);
const tableColumnKeys = ref<any[]>([]);
@ -119,10 +150,10 @@ const findFindNodes = (columns: any[]) => {
tableColumnKeys.value.push(column.key);
}
}
})
}
});
};
findFindNodes(tableColumns.value)
findFindNodes(tableColumns.value);
/**
* 处理为复杂表头, 待完成
@ -130,14 +161,31 @@ findFindNodes(tableColumns.value)
* @param level 层级, 用于决定会被 push 到的目标数组
*/
const findFinalNode = (level: number, columns: any[]) => {
columns.forEach(column => {
columns.forEach((column) => {
if (column.children) {
// 设置 rowspan
} else {
// 设置 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 {
// 设置 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<Recordable[]>([...props.selectedKeys]);
const tableExpandKeys = ref<Recordable[]>([...props.expandKeys]);
@ -538,21 +586,27 @@ const renderTotalRowCell = (column: any) => {
</template>
</colgroup>
<thead>
<template v-for="(tableHeadColumn, tableHeadColumnIndex) in tableHeadColumns" :key="tableHeadColumnIndex">
<tr>
<template
v-for="(column, columnIndex) in columns"
v-for="(column, columnIndex) in tableHeadColumn"
:key="column"
>
<th
v-if="tableColumnKeys.includes(column.key)"
:colspan="column.colspan"
:rowspan="column.rowspan"
class="layui-table-cell"
:class="[
renderFixedClassName(column, columnIndex),
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
column.fixed
? `layui-table-fixed-${column.fixed}`
: '',
column.type == 'checkbox'
? 'layui-table-cell-checkbox'
: '',
column.type == 'radio' ? 'layui-table-cell-radio' : '',
column.type == 'radio'
? 'layui-table-cell-radio'
: '',
column.type == 'number'
? 'layui-table-cell-number'
: '',
@ -594,7 +648,9 @@ const renderTotalRowCell = (column: any) => {
title="升序"
></i>
<i
@click.stop="sortTable($event, column.key, 'desc')"
@click.stop="
sortTable($event, column.key, 'desc')
"
class="layui-edge layui-table-sort-desc"
title="降序"
></i>
@ -603,6 +659,7 @@ const renderTotalRowCell = (column: any) => {
</th>
</template>
</tr>
</template>
</thead>
</table>
</div>

21
package/document-component/src/document/zh-CN/components/table.md
View File

@ -1169,7 +1169,7 @@ export default {
::: demo 通过 `span-method` 属性, 自定义行列合并的逻辑。
<template>
<lay-table :columns="columns27" :data-source="dataSource27"></lay-table>
<lay-table :columns="columns29" :data-source="dataSource29"></lay-table>
</template>
<script>
@ -1178,7 +1178,7 @@ import { ref } from 'vue'
export default {
setup() {
const columns27 = [
const columns29 = [
{
title:"名称",
width:"200px",
@ -1188,6 +1188,7 @@ export default {
children: [
{ title: "省", key: "province", width: "300px", },
{ title: "市", key: "city", width: "300px", },
{ title: "区", key: "area", width: "300px", },
]
},{
title:"性别",
@ -1204,17 +1205,17 @@ export default {
}
]
const dataSource27 = [
{id:"1",username:"root",province:"山东",city:"济南", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"2",username:"root",province:"山东",city:"济南", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"3",username:"woow",province:"山东",city:"济南", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"4",username:"woow",province:"山东",city:"济南", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"5",username:"woow",province:"山东",city:"济南", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
const dataSource29 = [
{id:"1",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"2",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"3",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"4",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"5",username:"就眠儀式",province:"山东",city:"济南",area: "高新区", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
]
return {
columns27,
dataSource27,
columns29,
dataSource29,
}
}
}