✨(component): table 复杂表头, 完成 body 平铺, header 的合并待处理
This commit is contained in:
parent
8d43f28fb3
commit
8c9078b0fc
@ -89,15 +89,55 @@ const slots = slot.default && slot.default();
|
|||||||
const allChecked = ref(false);
|
const allChecked = ref(false);
|
||||||
const hasChecked = ref(false);
|
const hasChecked = ref(false);
|
||||||
const tableDataSource = ref<any[]>([...props.dataSource]);
|
const tableDataSource = ref<any[]>([...props.dataSource]);
|
||||||
const tableColumns = ref([...props.columns]);
|
const tableColumns = computed(() => {
|
||||||
|
return [...props.columns];
|
||||||
|
})
|
||||||
|
|
||||||
const tableColumnKeys = ref(
|
const tableHeadColumns = ref<any[]>([])
|
||||||
props.columns.map((item: any) => {
|
const tableBodyColumns = ref<any[]>([])
|
||||||
if (item.hide != true) {
|
|
||||||
return item.key;
|
const findFindNode = (columns: any[]) => {
|
||||||
|
columns.forEach((column) => {
|
||||||
|
if(column.children) {
|
||||||
|
findFindNode(column.children);
|
||||||
|
} else {
|
||||||
|
tableBodyColumns.value.push(column);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
);
|
}
|
||||||
|
|
||||||
|
findFindNode(tableColumns.value)
|
||||||
|
|
||||||
|
const tableColumnKeys = ref<any[]>([]);
|
||||||
|
|
||||||
|
const findFindNodes = (columns: any[]) => {
|
||||||
|
columns.forEach((column) => {
|
||||||
|
if(column.children) {
|
||||||
|
findFindNodes(column.children);
|
||||||
|
} else {
|
||||||
|
if(!column.hide) {
|
||||||
|
tableColumnKeys.value.push(column.key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
findFindNodes(tableColumns.value)
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 处理为复杂表头, 待完成
|
||||||
|
*
|
||||||
|
* @param level 层级, 用于决定会被 push 到的目标数组
|
||||||
|
*/
|
||||||
|
const findFinalNode = (level: number, columns: any[]) => {
|
||||||
|
columns.forEach(column => {
|
||||||
|
if(column.children) {
|
||||||
|
// 设置 rowspan
|
||||||
|
} else {
|
||||||
|
// 设置 colspan
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
|
const tableSelectedKeys = ref<Recordable[]>([...props.selectedKeys]);
|
||||||
const tableExpandKeys = ref<Recordable[]>([...props.expandKeys]);
|
const tableExpandKeys = ref<Recordable[]>([...props.expandKeys]);
|
||||||
@ -602,7 +642,7 @@ const renderTotalRowCell = (column: any) => {
|
|||||||
:id="id"
|
:id="id"
|
||||||
:index="index"
|
:index="index"
|
||||||
:data="data"
|
:data="data"
|
||||||
:columns="columns"
|
:columns="tableBodyColumns"
|
||||||
:indent-size="indentSize"
|
:indent-size="indentSize"
|
||||||
:currentIndentSize="currentIndentSize"
|
:currentIndentSize="currentIndentSize"
|
||||||
:tableColumnKeys="tableColumnKeys"
|
:tableColumnKeys="tableColumnKeys"
|
||||||
|
@ -1,13 +1,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
name: "treeSelect"
|
name: "treeSelect",
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup></script>
|
||||||
|
|
||||||
</script>
|
<template></template>
|
||||||
|
|
||||||
<template>
|
|
||||||
|
|
||||||
</template>
|
|
||||||
|
@ -4,7 +4,8 @@
|
|||||||
class="layui-quote layui-text"
|
class="layui-quote layui-text"
|
||||||
style="margin: 30px 0; letter-spacing: 1px"
|
style="margin: 30px 0; letter-spacing: 1px"
|
||||||
>
|
>
|
||||||
以创造性的行为实践于人世。若能以写作为工具,为道途,先帮助自己一程,再以领悟帮助他人一程。这是一种服务 - 庆山
|
以创造性的行为实践于人世。若能以写作为工具,为道途,先帮助自己一程,再以领悟帮助他人一程。这是一种服务
|
||||||
|
- 庆山
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<fieldset class="layui-field layui-field-title">
|
<fieldset class="layui-field layui-field-title">
|
||||||
<legend style="margin-bottom: 20px; text-align: center">独立组件</legend>
|
<legend style="margin-bottom: 20px; text-align: center">独立组件</legend>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user