theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🐛(component): table

Browse Source 
修复table 布局问题
column 新增minWidth和ellipsisTooltip属性

ISSUES CLOSED: https://gitee.com/layui/layui-vue/issues/I58DWF
This commit is contained in:
dingyongya
2022-05-21 17:11:28 +08:00
parent 0d3a7e4f89
commit 5b64cad09c
158 changed files with 42149 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,10 +9,11 @@
width: 100%;
background-color: #fff;
color: #666;
table-layout: fixed;
}
.layui-table tr {
display: flex;
// display: flex;
}
.layui-table th {
@@ -55,7 +56,7 @@
.layui-table td,
.layui-table th {
position: relative;
padding: 9px 15px;
padding: 9px 8px;
min-height: 20px;
height: 40px;
line-height: 20px;
@@ -105,6 +106,7 @@
.layui-table-box {
position: relative;
overflow: hidden;
}
.layui-table-view .layui-table {
@@ -236,9 +238,16 @@
.layui-table-cell,
.layui-table-tool-panel li {
overflow: hidden;
text-overflow: ellipsis;
// white-space: nowrap;
}
.layui-table-call-ellipsis{
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.layui-table-tool-panel li {
@@ -355,6 +364,29 @@
position: relative;
overflow: auto;
margin-bottom: -1px;
&::-webkit-scrollbar {
width: 13px;
height: 13px;
}
&::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.4);
background-clip: padding-box;
border: 3px solid transparent;
border-radius: 7px;
}
&::-webkit-scrollbar-thumb:hover {
background-color: rgba(0, 0, 0, 0.5);
}
&::-webkit-scrollbar-track {
background-color: transparent;
}
&::-webkit-scrollbar-track:hover {
background-color: #f8fafc;
}
}
.layui-table-body .layui-none {

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

@@ -13,6 +13,7 @@ import LayDropdown from "../dropdown/index.vue";
import LayPage from "../page/index.vue";
import { LayIcon } from "@layui/icons-vue";
import "./index.less";
import LayTooltip from "../tooltip/index.vue";
const tableId = uuidv4();
@@ -275,7 +276,8 @@ onMounted(() => {
class="layui-table-cell"
:style="{
textAlign: column.align,
flex: column.width ? '0 0 ' + column.width : '1',
width: column.width ? column.width : '0',
minWidth: column.minWidth ? column.minWidth : '47px',
}"
>
<span>
@@ -340,10 +342,31 @@ onMounted(() => {
class="layui-table-cell"
:style="{
textAlign: column.align,
flex: column.width ? '0 0 ' + column.width : '1',
width: column.width ? column.width : '0',
minWidth: column.minWidth
? column.minWidth
: '47px',
whiteSpace: column.ellipsisTooltip
? 'nowrap'
: 'normal',
}"
>
<slot :name="column.customSlot" :data="data"></slot>
<lay-tooltip
v-if="column.ellipsisTooltip"
:content="data[column.key]"
>
<div class="layui-table-call-ellipsis">
<slot
:name="column.customSlot"
:data="data"
></slot>
</div>
</lay-tooltip>
<slot
v-else
:name="column.customSlot"
:data="data"
></slot>
</td>
</template>
<!-- 匹 配 Column -->
@@ -353,10 +376,24 @@ onMounted(() => {
class="layui-table-cell"
:style="{
textAlign: column.align,
flex: column.width ? '0 0 ' + column.width : '1',
width: column.width ? column.width : '0',
minWidth: column.minWidth
? column.minWidth
: '47px',
whiteSpace: column.ellipsisTooltip
? 'nowrap'
: 'normal',
}"
>
<span> {{ data[column.key] }} </span>
<lay-tooltip
v-if="column.ellipsisTooltip"
:content="data[column.key]"
>
<div class="layui-table-call-ellipsis">
{{ data[column.key] }}
</div>
</lay-tooltip>
<span v-else> {{ data[column.key] }} </span>
</td>
</template>
</template>