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
Show Stats 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"

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

@ -811,6 +811,82 @@ export default {
:::
::: title 合并行列
:::
::: demo 通过 `columns` 配置 `type:'radio'` 开启单选列。
<template>
<lay-table :columns="columns24" :data-source="dataSource24" v-model:selected-key="selectedKey24" :spanMethod="spanMethod24"></lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns24 = [
{
title:"账户",
width:"200px",
key:"username"
},{
title:"密码",
width: "300px",
key:"password"
},{
title:"性别",
key:"sex"
},{
title:"年龄",
width: "300px",
key:"age"
},{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true
}
]
const selectedKey24 = ref("2");
const dataSource24 = [
{id:"1",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"2",username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{id:"3",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"4",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{id:"5",username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
]
const spanMethod24 = (
row,
column,
rowIndex,
columnIndex,
) => {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2]
} else if (columnIndex === 1) {
return [0, 0]
}
}
}
return {
columns24,
dataSource24,
spanMethod24,
selectedKey24,
}
}
}
</script>
:::
::: title 暂无数据
:::