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

✨(component): 新增 span-method 属性, 支持行列合并

Browse Source
This commit is contained in:
就眠儀式
2022-08-04 10:32:29 +08:00
parent 2a95b7a3e4
commit 0f4144fafc
3 changed files with 129 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
package/component/src/component/table/TableRow.vue
View File

@@ -31,6 +31,7 @@ export interface LayTableRowProps {
rowStyle: string | Function;
id: string;
data: any;
spanMethod: Function;
}
const slot = useSlots();
@@ -188,6 +189,37 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
}
}
};
const spanMethodAttr = (
row: any,
column: any,
rowIndex: number,
columnIndex: number) => {
const attrs = props.spanMethod(row, column, rowIndex, columnIndex);
if(attrs instanceof Array) {
return {rowspan: attrs[0], colspan: attrs[1]}
} else if(attrs instanceof Object) {
return attrs;
} else {
return {rowspan: 1, colspan: 1}
}
}
const isAutoShow = (
row: any,
column: any,
rowIndex: number,
columnIndex: number) => {
const attrs = spanMethodAttr(row, column, rowIndex, columnIndex);
if(attrs.colspan == 0 && attrs.rowspan == 0) {
return false;
} else {
return true;
}
}
</script>
<template>
@@ -203,6 +235,9 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
<template v-if="column.type == 'radio'">
<td
class="layui-table-cell layui-table-cell-radio"
v-if="isAutoShow(data, column, index, columnIndex)"
:colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
:rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
:style="[
{
textAlign: column.align,
@@ -249,6 +284,9 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
<template v-if="column.type == 'checkbox'">
<td
class="layui-table-cell layui-table-cell-checkbox"
v-if="isAutoShow(data, column, index, columnIndex)"
:colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
:rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
:style="[
{
textAlign: column.align,
@@ -299,6 +337,9 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
<template v-if="column.type == 'number'">
<td
class="layui-table-cell layui-table-cell-number"
v-if="isAutoShow(data, column, index, columnIndex)"
:colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
:rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
:style="[
{
textAlign: column.align,
@@ -345,6 +386,9 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
<template v-if="column.customSlot">
<td
class="layui-table-cell"
v-if="isAutoShow(data, column, index, columnIndex)"
:colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
:rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
:style="[
{
textAlign: column.align,
@@ -399,6 +443,9 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
<template v-if="column.key in data">
<td
class="layui-table-cell"
v-if="isAutoShow(data, column, index, columnIndex)"
:colspan="spanMethodAttr(data, column, index, columnIndex).colspan"
:rowspan="spanMethodAttr(data, column, index, columnIndex).rowspan"
:style="[
{
textAlign: column.align,
@@ -479,9 +526,10 @@ const renderFixedClassName = (column: any, columnIndex: number) => {
:cellClassName="cellClassName"
:rowStyle="rowStyle"
:rowClassName="rowClassName"
:spanMethod="spanMethod"
@row="rowClick"
@row-double="rowDoubleClick"
@contextmenu="contextmenu"
@row-contextmenu="rowContextmenu"
v-model:selectedKeys="tableSelectedKeys"
v-model:selectedKey="tableSelectedKey"
>

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

@@ -45,6 +45,7 @@ export interface LayTableProps {
cellClassName?: string | Function;
rowStyle?: string | Function;
cellStyle?: string | Function;
spanMethod?: Function;
}
const props = withDefaults(defineProps<LayTableProps>(), {
@@ -61,6 +62,7 @@ const props = withDefaults(defineProps<LayTableProps>(), {
expandIndex: 0,
rowStyle: "",
cellStyle: "",
spanMethod: () => {}
});
const tableId = uuidv4();
@@ -285,10 +287,7 @@ const getFixedColumn = () => {
hasr.value = true;
} else {
// @ts-ignore
if (
tableBody.value?.scrollLeft + tableBody.value?.offsetWidth + 2 >
tableBody.value?.scrollWidth
) {
if (tableBody.value?.scrollLeft + tableBody.value?.offsetWidth + 2 >tableBody.value?.scrollWidth) {
hasl.value = true;
hasr.value = false;
} else {
@@ -578,6 +577,7 @@ const renderTotalRowCell = (column: any) => {
:cellClassName="cellClassName"
:rowStyle="rowStyle"
:rowClassName="rowClassName"
:spanMethod="spanMethod"
@row="rowClick"
@row-double="rowDoubleClick"
@row-contextmenu="rowContextmenu"