🐛(component): 修复 table css 冲突

This commit is contained in:
就眠儀式 2022-07-04 01:19:39 +08:00
parent 7dcb7c507c
commit 1731369f29
4 changed files with 27 additions and 21 deletions

View File

@ -158,7 +158,10 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
}, },
renderCellStyle(data, column, index, columnIndex), renderCellStyle(data, column, index, columnIndex),
]" ]"
:class="[renderCellClassName(data, column, index, columnIndex),column.fixed ? `layui-table-fixed-${column.fixed}` : '']" :class="[
renderCellClassName(data, column, index, columnIndex),
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"
> >
<!-- 树表占位与缩进 --> <!-- 树表占位与缩进 -->
<span <span
@ -208,7 +211,10 @@ const childrenIndentSize = props.currentIndentSize + props.indentSize;
}, },
renderCellStyle(data, column, index, columnIndex), renderCellStyle(data, column, index, columnIndex),
]" ]"
:class="[renderCellClassName(data, column, index, columnIndex),column.fixed ? `layui-table-fixed-${column.fixed}` : '']" :class="[
renderCellClassName(data, column, index, columnIndex),
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"
> >
<!-- 树表占位与缩进 --> <!-- 树表占位与缩进 -->
<span <span

View File

@ -17,18 +17,18 @@
font-weight: 400; font-weight: 400;
} }
.layui-table tbody tr:hover,
.layui-table thead tr,
.layui-table-click,
.layui-table-header,
.layui-table-hover,
.layui-table-mend, .layui-table-mend,
.layui-table-patch,
.layui-table-tool, .layui-table-tool,
.layui-table-total, .layui-table-total,
.layui-table-patch,
.layui-table-click,
.layui-table-hover,
.layui-table-header,
.layui-table-total tr, .layui-table-total tr,
.layui-table.layui-table-even tr:nth-child(even) { .layui-table thead tr,
background-color: var(--global-neutral-color-1); .layui-table tbody tr:hover td,
.layui-table.layui-table-even tr:nth-child(even) td {
background-color: var(--global-neutral-color-1)!important;
} }
.layui-table td, .layui-table td,
@ -419,30 +419,27 @@
overflow: hidden; overflow: hidden;
} }
.layui-table-header .layui-table-cell {
background-color: #FAFAFA;
}
.layui-table-fixed-left { .layui-table-fixed-left {
left: 0; left: 0;
z-index: 2; z-index: 2;
display: block; display: block;
background: white;
position: sticky!important; position: sticky!important;
box-shadow: 1px 0 8px rgba(0, 0, 0, 0.08);
} }
.layui-table-fixed-right { .layui-table-fixed-right {
right: 0; right: 0;
z-index: 2; z-index: 2;
display: block; display: block;
position: sticky!important;
box-shadow: -1px 0 8px rgba(0, 0, 0, 0.08);
}
.layui-table-header .layui-table-cell {
background: #FAFAFA;
}
.layui-table-body .layui-table-cell {
background: white; background: white;
position: sticky!important;
} }
.layui-table-mend { .layui-table-mend {
position: absolute; position: absolute;
right: -49px; right: -49px;

View File

@ -327,7 +327,9 @@ props.dataSource.map((value: any) => {
<th <th
v-if="tableColumnKeys.includes(column.key)" v-if="tableColumnKeys.includes(column.key)"
class="layui-table-cell" class="layui-table-cell"
:class="[column.fixed ? `layui-table-fixed-${column.fixed}` : '']" :class="[
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
]"
:style="{ :style="{
textAlign: column.align, textAlign: column.align,
}" }"

View File

@ -605,6 +605,7 @@ export default {
<template> <template>
<lay-table :columns="columns1" :dataSource="dataSource1" skin="line"></lay-table> <lay-table :columns="columns1" :dataSource="dataSource1" skin="line"></lay-table>
<lay-table :columns="columns1" :dataSource="dataSource1" skin="nob" :even="true"></lay-table>
<lay-table :columns="columns1" :dataSource="dataSource1" skin="row"></lay-table> <lay-table :columns="columns1" :dataSource="dataSource1" skin="row"></lay-table>
</template> </template>