🌀(component): 优化 table 固定列阴影样式与计算逻辑
This commit is contained in:
parent
d282a6ea5e
commit
90cdaf037d
@ -3,6 +3,7 @@
|
|||||||
<slot></slot>
|
<slot></slot>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
name: "LayAffix",
|
name: "LayAffix",
|
||||||
|
@ -155,6 +155,14 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
|
|||||||
}
|
}
|
||||||
return { right: `${right}px` } as StyleValue;
|
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;
|
return {} as StyleValue;
|
||||||
};
|
};
|
||||||
|
@ -431,10 +431,12 @@
|
|||||||
|
|
||||||
.layui-table-has-fixed-left .layui-table-fixed-left-last {
|
.layui-table-has-fixed-left .layui-table-fixed-left-last {
|
||||||
overflow: initial!important;
|
overflow: initial!important;
|
||||||
|
border-right: none!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-table-has-fixed-right .layui-table-fixed-right-first {
|
.layui-table-has-fixed-right .layui-table-fixed-right-first {
|
||||||
overflow: initial!important;
|
overflow: initial!important;
|
||||||
|
border-left: 1px solid transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.layui-table-fixed-left-last::after {
|
.layui-table-fixed-left-last::after {
|
||||||
|
@ -6,16 +6,7 @@ export default {
|
|||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
import {
|
import { ref, watch, useSlots, withDefaults, onMounted, StyleValue, WritableComputedRef, computed } from "vue";
|
||||||
ref,
|
|
||||||
watch,
|
|
||||||
useSlots,
|
|
||||||
withDefaults,
|
|
||||||
onMounted,
|
|
||||||
StyleValue,
|
|
||||||
WritableComputedRef,
|
|
||||||
computed,
|
|
||||||
} from "vue";
|
|
||||||
import { v4 as uuidv4 } from "../../utils/guidUtil";
|
import { v4 as uuidv4 } from "../../utils/guidUtil";
|
||||||
import { Recordable } from "../../types";
|
import { Recordable } from "../../types";
|
||||||
import { LayIcon } from "@layui/icons-vue";
|
import { LayIcon } from "@layui/icons-vue";
|
||||||
@ -280,10 +271,7 @@ const getFixedColumn = () => {
|
|||||||
hasr.value = true;
|
hasr.value = true;
|
||||||
} else {
|
} else {
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
if (
|
if (tableBody.value?.scrollLeft + tableBody.value?.offsetWidth + 2 > tableBody.value?.scrollWidth) {
|
||||||
tableBody.value?.scrollLeft + tableBody.value?.offsetWidth >
|
|
||||||
tableBody.value?.scrollWidth
|
|
||||||
) {
|
|
||||||
hasl.value = true;
|
hasl.value = true;
|
||||||
hasr.value = false;
|
hasr.value = false;
|
||||||
} else {
|
} else {
|
||||||
@ -333,6 +321,14 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
|
|||||||
}
|
}
|
||||||
return { right: `${right}px` } as StyleValue;
|
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;
|
return {} as StyleValue;
|
||||||
};
|
};
|
||||||
@ -460,15 +456,11 @@ const renderTotalRowCell = (column: any) => {
|
|||||||
v-if="tableColumnKeys.includes(column.key)"
|
v-if="tableColumnKeys.includes(column.key)"
|
||||||
class="layui-table-cell"
|
class="layui-table-cell"
|
||||||
:class="[
|
:class="[
|
||||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
|
||||||
renderFixedClassName(column, columnIndex),
|
renderFixedClassName(column, columnIndex),
|
||||||
column.type == 'checkbox'
|
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||||
? 'layui-table-cell-checkbox'
|
column.type == 'checkbox' ? 'layui-table-cell-checkbox' : '',
|
||||||
: '',
|
|
||||||
column.type == 'radio' ? 'layui-table-cell-radio' : '',
|
column.type == 'radio' ? 'layui-table-cell-radio' : '',
|
||||||
column.type == 'number'
|
column.type == 'number' ? 'layui-table-cell-number' : '',
|
||||||
? 'layui-table-cell-number'
|
|
||||||
: '',
|
|
||||||
]"
|
]"
|
||||||
:style="[
|
:style="[
|
||||||
{
|
{
|
||||||
|
Loading…
Reference in New Issue
Block a user