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>

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

@@ -35,12 +35,16 @@ export default {
title:"年龄",
width: "180px",
key:"age"
},{
title:"备注",
width: "180px",
key:"remark",
}
]
const dataSource1 = [
{username:"root", password:"root", age:"18"},
{username:"woow", password:"woow", age:"20"}
{username:"root", password:"root", age:"18", remark: 'layui - vue（谐音：类 UI) '},
{username:"woow", password:"woow", age:"20", remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
]
return {
@@ -256,26 +260,34 @@ export default {
},{
title:"密码",
customSlot:"password",
width:"200px",
key:"password",
align: "center"
},
{
title:"年龄",
width: "180px",
width: "200px",
key:"age",
sort: true,
align: "right"
},
{
title:"备注",
width: "180px",
key:"remark",
ellipsisTooltip: true,
}
,{
title:"操作",
width:"100px",
customSlot:"operator",
key:"operator"
}
]
const dataSource5 = [
{id:"1", username:"root", age:"18"},
{id:"2", username:"woow", age:"20"}
{id:"1", username:"root",password: '**',age:"18",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'},
{id:"2", username:"woow",password: '**', age:"20",remark: 'layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.'}
]
const rowClick5 = function(data) {
@@ -358,9 +370,11 @@ export default {
| key | 数据字段 | -- | -- | -- |
| customSlot | 自定义插槽 | -- | -- | -- |
| width | 宽度 | -- | -- | -- |
| minWidth | 最小宽度 | -- | -- | -- |
| sort | 排序 | -- | -- | -- |
| titleSlot | 标题插槽 | -- | -- | -- |
| align | 对齐方式 | `string` | `left` | `left` `right` `center` |
| textOverflowTooltip | 当内容过长被隐藏时显示 tooltip | `boolean` | `false` | `true` `false` |
:::