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

✨(component): update

Browse Source
This commit is contained in:
就眠儀式 2022-07-11 10:33:20 +08:00
parent 6a7a429c13
commit 401bc9db63
3 changed files with 96 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -128,18 +128,44 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
if (column.fixed == "left") {
var left = 0;
for (var i = 0; i < columnIndex; i++) {
left = left + props.columns[i]?.width.replace("px", "");
if(props.columns[i].fixed && props.columns[i].fixed == "left") {
left = left + props.columns[i]?.width.replace("px", "");
}
}
return `left:${left}px`;
} else {
var right = 0;
for (var i = columnIndex + 1; i < props.columns.length; i++) {
right = right + props.columns[i]?.width.replace("px", "");
if(props.columns[i].fixed && props.columns[i].fixed == "right") {
right = right + props.columns[i]?.width.replace("px", "");
}
}
return `right:${right}px`;
}
}
};
const renderFixedClassName = (column: any, columnIndex: number) => {
if (column.fixed) {
if (column.fixed == "left") {
var left = true;
for (var i = columnIndex + 1; i < props.columns.length; i++) {
if(props.columns[i].fixed && props.columns[i].fixed == "left") {
left = false;
}
}
return `layui-table-fixed-left-last`;
} else {
var right = true;
for (var i = 0; i < columnIndex; i++) {
if(props.columns[i].fixed && props.columns[i].fixed == "right") {
right = false;
}
}
return `layui-table-fixed-right-first`;
}
}
}
</script>
<template>
@ -232,6 +258,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
renderCellStyle(data, column, index, columnIndex),
]"
:class="[
renderFixedClassName(column, columnIndex),
renderCellClassName(data, column, index, columnIndex),
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"

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

@ -28,7 +28,7 @@
.layui-table thead tr,
.layui-table tbody tr:hover td,
.layui-table.layui-table-even tr:nth-child(even) td {
background-color: var(--global-neutral-color-1)!important;
background-color: var(--global-neutral-color-1) !important;
}
.layui-table td,
@ -106,7 +106,6 @@
.layui-table-box {
position: relative;
overflow: hidden;
}
.layui-table-view .layui-table {
@ -242,7 +241,7 @@
text-overflow: ellipsis;
}
.layui-table-call-ellipsis{
.layui-table-call-ellipsis {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
@ -397,23 +396,23 @@
}
.layui-table-header .layui-table-cell {
background-color: #FAFAFA;
background-color: #fafafa;
}
.layui-table-fixed-left {
left: 0;
z-index: 2;
background: white;
position: sticky!important;
position: sticky !important;
}
.layui-table-fixed-right {
right: 0;
z-index: 2;
background: white;
position: sticky!important;
border-left: 1px solid #eee!important;
border-right: none!important;
position: sticky !important;
border-left: 1px solid #eee !important;
border-right: none !important;
}
.layui-table-fixed-left,
@ -421,13 +420,40 @@
outline-width: 1px;
outline-style: solid;
outline-color: #eee;
border: none!important;
border: none !important;
}
.layui-table-fixed-left-last::after {
position: absolute;
top: 0;
right: 0;
bottom: -1px;
width: 30px;
transform: translate(100%);
transition: box-shadow 0.3s;
}
.layui-table-fixed-left-last::after {
box-shadow: inset 10px 0 8px -8px #00000026;
}
.layui-table-fixed-right-first::after {
position: absolute;
top: 0;
bottom: -1px;
left: 0;
width: 30px;
transform: translate(-100%);
transition: box-shadow 0.3s;
}
.layui-table-fixed-right-first::after {
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;
border-right: none !important;
}
.layui-table-mend {
@ -643,6 +669,6 @@ body .layui-table-tips .layui-layer-content {
margin: 10px 0;
}
.layui-table-cell-expand{
.layui-table-cell-expand {
border-bottom: 1px solid #eee;
}
}

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

@ -255,18 +255,44 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
if (column.fixed == "left") {
var left = 0;
for (var i = 0; i < columnIndex; i++) {
left = left + props.columns[i]?.width.replace("px", "");
if(props.columns[i].fixed && props.columns[i].fixed == "left") {
left = left + props.columns[i]?.width.replace("px", "");
}
}
return `left:${left}px`;
} else {
var right = 0;
for (var i = columnIndex + 1; i < props.columns.length; i++) {
right = right + props.columns[i]?.width.replace("px", "");
if(props.columns[i].fixed && props.columns[i].fixed == "right") {
right = right + props.columns[i]?.width.replace("px", "");
}
}
return `right:${right}px`;
}
}
};
const renderFixedClassName = (column: any, columnIndex: number) => {
if (column.fixed) {
if (column.fixed == "left") {
var left = true;
for (var i = columnIndex + 1; i < props.columns.length; i++) {
if(props.columns[i].fixed && props.columns[i].fixed == "left") {
left = false;
}
}
return left ? `layui-table-fixed-left-last` : '';
} else {
var right = true;
for (var i = 0; i < columnIndex; i++) {
if(props.columns[i].fixed && props.columns[i].fixed == "right") {
right = false;
}
}
return right ? `layui-table-fixed-right-first` : '';
}
}
}
</script>
<template>
@ -353,6 +379,7 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
class="layui-table-cell"
:class="[
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
renderFixedClassName(column, columnIndex)
]"
:style="[
{