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-09-03 02:47:10 +08:00
parent 839b3b657a
commit 59ab68acb7
3 changed files with 23 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -206,15 +206,16 @@
position: relative; position: relative;
width: 26px; width: 26px;
height: 26px; height: 26px;
padding: 5px; line-height: 26px;
line-height: 16px; border-radius: 2px;
margin-right: 10px; margin-right: 10px;
text-align: center; text-align: center;
color: #333; color: #333;
border: 1px solid #ccc; border: 1px solid #ccc;
cursor: pointer; cursor: pointer;
-webkit-transition: 0.5s all; .layui-icon {
transition: 0.5s all; font-size: 15px;
}
} }
.layui-table-tool .layui-inline[lay-event]:hover { .layui-table-tool .layui-inline[lay-event]:hover {
@ -438,6 +439,10 @@
margin-bottom: 12px; margin-bottom: 12px;
} }
.layui-table-tool-checkbox > *:last-child{
margin-bottom: 0px;
}
.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; border-right: none!important;

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

@ -630,8 +630,8 @@ onBeforeUnmount(() => {
</div> </div>
<div v-if="defaultToolbar" class="layui-table-tool-self"> <div v-if="defaultToolbar" class="layui-table-tool-self">
<lay-dropdown updateAtScroll> <lay-dropdown updateAtScroll>
<div class="layui-inline" title="筛选列" lay-event="LAYTABLE_PRINT"> <div class="layui-inline" title="筛选" lay-event>
<i class="layui-icon layui-icon-cols"></i> <i class="layui-icon layui-icon-slider"></i>
</div> </div>
<template #content> <template #content>
<div class="layui-table-tool-checkbox"> <div class="layui-table-tool-checkbox">
@ -650,7 +650,7 @@ onBeforeUnmount(() => {
<div <div
class="layui-inline" class="layui-inline"
title="导出" title="导出"
lay-event="LAYTABLE_PRINT" lay-event
@click="exportData()" @click="exportData()"
> >
<i class="layui-icon layui-icon-export"></i> <i class="layui-icon layui-icon-export"></i>
@ -658,7 +658,7 @@ onBeforeUnmount(() => {
<div <div
class="layui-inline" class="layui-inline"
title="打印" title="打印"
lay-event="LAYTABLE_PRINT" lay-event
@click="print()" @click="print()"
> >
<i class="layui-icon layui-icon-print"></i> <i class="layui-icon layui-icon-print"></i>

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

@ -1388,9 +1388,9 @@ export default {
::: demo 使用了绝大部分属性的 table 案例 ::: demo 使用了绝大部分属性的 table 案例
<template> <template>
<lay-table :columns="columns5" id="id" :expand-index="1" :data-source="dataSource5" v-model:selected-keys="selectedKeys5" :checkbox="checkbox5" :default-toolbar="defaultToolbar5" @row="rowClick5" max-height="200px"> <lay-table :columns="columns5" id="id" :expand-index="1" :data-source="dataSource5" v-model:selected-keys="selectedKeys5" :checkbox="checkbox5" :page="page5" :default-toolbar="defaultToolbar5" @row="rowClick5" max-height="200px">
<template v-slot:toolbar> <template v-slot:toolbar>
<lay-button size="sm">新增</lay-button> <lay-button size="sm" type="primary">新增</lay-button>
<lay-button size="sm">删除</lay-button> <lay-button size="sm">删除</lay-button>
</template> </template>
<template v-slot:name="{ data }"> {{data.name}} </template> <template v-slot:name="{ data }"> {{data.name}} </template>
@ -1418,6 +1418,12 @@ export default {
const checkbox5 = ref(true) const checkbox5 = ref(true)
const defaultToolbar5 = ref(true) const defaultToolbar5 = ref(true)
const page5 = {
total: 100,
limit: 10,
current: 1
}
const columns5 = [ const columns5 = [
{ {
title: "序号", title: "序号",
@ -1483,7 +1489,8 @@ export default {
checkbox5, checkbox5,
defaultToolbar5, defaultToolbar5,
rowClick5, rowClick5,
rowDoubleClick5 rowDoubleClick5,
page5
} }
} }
} }