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-04 00:01:54 +08:00
parent fd3ca29bd0
commit 7dcb7c507c
4 changed files with 80 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -419,20 +419,28 @@
overflow: hidden;
}
.layui-table-fixed-l {
.layui-table-fixed-left {
left: 0;
z-index: 2;
display: block;
position: sticky!important;
box-shadow: 1px 0 8px rgba(0, 0, 0, 0.08);
}
.layui-table-fixed-r {
left: auto;
right: -1px;
border-width: 0 0 0 1px;
.layui-table-fixed-right {
right: 0;
z-index: 2;
display: block;
position: sticky!important;
box-shadow: -1px 0 8px rgba(0, 0, 0, 0.08);
}
.layui-table-fixed-r .layui-table-header {
position: relative;
overflow: visible;
.layui-table-header .layui-table-cell {
background: #FAFAFA;
}
.layui-table-body .layui-table-cell {
background: white;
}
.layui-table-mend {

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

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

63
package/document-component/src/document/zh-CN/components/table.md
View File

@ -606,7 +606,6 @@ export default {
<template>
<lay-table :columns="columns1" :dataSource="dataSource1" skin="line"></lay-table>
<lay-table :columns="columns1" :dataSource="dataSource1" skin="row"></lay-table>
<lay-table :columns="columns1" :dataSource="dataSource1" skin="nob" even></lay-table>
</template>
<script>
@ -632,7 +631,7 @@ export default {
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true,
ellipsisTooltip: true
}
]
@ -654,6 +653,66 @@ export default {
:::
::: title 固定行列
:::
::: demo 通过 `skin` 属性, 切换 table 风格。
<template>
<lay-table :columns="columns20" :dataSource="dataSource20"></lay-table>
</template>
<script>
import { ref } from 'vue'
export default {
setup() {
const columns20 = [
{
fixed:"left",
title:"账户",
width:"200px",
key:"username"
},{
title:"密码",
width: "300px",
key:"password"
},{
title:"性别",
width: "300px",
key:"sex"
},{
title:"年龄",
width: "300px",
key:"age"
},{
fixed:"right",
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true
}
]
const dataSource20 = [
{username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"root", password:"root",sex:"男", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '},
{username:"woow", password:"woow",sex:"男", age:"20", remark: 'layui - vue（谐音：类 UI) '}
]
return {
columns20,
dataSource20,
}
}
}
</script>
:::
::: title Table 属性
:::