🐛(component): 修复 table css 冲突
This commit is contained in:
parent
7dcb7c507c
commit
1731369f29
@ -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
|
||||||
|
@ -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;
|
||||||
|
@ -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,
|
||||||
}"
|
}"
|
||||||
|
@ -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>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user