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-07-30 15:41:50 +08:00
parent d282a6ea5e
commit 90cdaf037d
4 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package/component/src/component/affix/index.vue
View File

@ -3,6 +3,7 @@
<slot></slot>
</div>
</template>
<script lang="ts">
export default {
name: "LayAffix",

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

@ -155,6 +155,14 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
}
return { right: `${right}px` } as StyleValue;
}
} else {
var isLast = true;
for (var i = columnIndex + 1; i < props.columns.length; i++) {
if (props.columns[i].fixed == undefined) {
isLast = false;
}
}
return isLast ? { "border-right": "none" } as StyleValue : {};
}
return {} as StyleValue;
};

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

@ -431,10 +431,12 @@
.layui-table-has-fixed-left .layui-table-fixed-left-last {
overflow: initial!important;
border-right: none!important;
}
.layui-table-has-fixed-right .layui-table-fixed-right-first {
overflow: initial!important;
border-left: 1px solid transparent !important;
}
.layui-table-fixed-left-last::after {

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

@ -6,16 +6,7 @@ export default {
<script setup lang="ts">
import "./index.less";
import {
ref,
watch,
useSlots,
withDefaults,
onMounted,
StyleValue,
WritableComputedRef,
computed,
} from "vue";
import { ref, watch, useSlots, withDefaults, onMounted, StyleValue, WritableComputedRef, computed } from "vue";
import { v4 as uuidv4 } from "../../utils/guidUtil";
import { Recordable } from "../../types";
import { LayIcon } from "@layui/icons-vue";
@ -280,10 +271,7 @@ const getFixedColumn = () => {
hasr.value = true;
} else {
// @ts-ignore
if (
tableBody.value?.scrollLeft + tableBody.value?.offsetWidth >
tableBody.value?.scrollWidth
) {
if (tableBody.value?.scrollLeft + tableBody.value?.offsetWidth + 2 > tableBody.value?.scrollWidth) {
hasl.value = true;
hasr.value = false;
} else {
@ -333,6 +321,14 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
}
return { right: `${right}px` } as StyleValue;
}
} else {
var isLast = true;
for (var i = columnIndex + 1; i < props.columns.length; i++) {
if (props.columns[i].fixed == undefined) {
isLast = false;
}
}
return isLast ? { "border-right": "none" } as StyleValue : {};
}
return {} as StyleValue;
};
@ -460,15 +456,11 @@ const renderTotalRowCell = (column: any) => {
v-if="tableColumnKeys.includes(column.key)"
class="layui-table-cell"
:class="[
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
renderFixedClassName(column, columnIndex),
column.type == 'checkbox'
? 'layui-table-cell-checkbox'
: '',
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
column.type == 'checkbox' ? 'layui-table-cell-checkbox' : '',
column.type == 'radio' ? 'layui-table-cell-radio' : '',
column.type == 'number'
? 'layui-table-cell-number'
: '',
column.type == 'number' ? 'layui-table-cell-number' : '',
]"
:style="[
{