Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(TableView): 表格最外层设置border导致表格有滚动条 #797

Merged
merged 1 commit into from
Jan 27, 2024
Merged

fix(TableView): 表格最外层设置border导致表格有滚动条 #797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
297 changes: 297 additions & 0 deletions src/components/u-table-view.vue/__tests__/__snapshots__/demo.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40393,6 +40393,303 @@ exports[`u-table-view.vue Demo-表头文字省略显示 1`] = `
</div>
`;

exports[`u-table-view.vue Demo-表格有border 1`] = `
<div class="root" direction="vertical" type vusion-slot-name="default">
<div class="root" style="border: 2px solid #ddd;">
<div class="table" position="static">
<div class="head" style="top: 0px;">
<table class="root head-table" sticky-fixed="true" striped="true">
<colgroup>
<col width="0">
<col width="0">
<col>
<col width="0">
</colgroup>
<thead>
<tr>
<th class="head-title boldHeader">
<span class="column-title" vusion-slot-name="title" vusion-slot-name-edit="title">
用户名
</span>
</th>
<th class="head-title boldHeader">
<span class="column-title" vusion-slot-name="title" vusion-slot-name-edit="title">
手机号码
</span>
</th>
<th class="head-title boldHeader">
<span class="column-title" vusion-slot-name="title" vusion-slot-name-edit="title">
地址
</span>
</th>
<th class="head-title boldHeader">
<span class="column-title" vusion-slot-name="title" vusion-slot-name-edit="title">
最近登录时间
</span>
</th>
</tr>
</thead>
</table>
</div>
<div class="body" sticky-fixed="true">
<div class="root scrollcview">
<div class="wrap">
<div>
<table class="root" sticky-fixed="true" striped="true">
<colgroup>
<col width="0">
<col width="0">
<col>
<col width="0">
</colgroup>
<tbody>
<tr class="row">
<td class="cell">
<span class="column-field">张三</span>
</td>
<td class="cell">
<span class="column-field">18612917895</span>
</td>
<td class="cell">
<span class="column-field">浙江省杭州市滨江区网商路599号网易大厦</span>
</td>
<td class="cell">
<span class="column-field">2018-05-28 21:52:11</span>
</td>
</tr>
<tr class="row">
<td class="cell">
<span class="column-field">小明</span>
</td>
<td class="cell">
<span class="column-field">13727160283</span>
</td>
<td class="cell">
<span class="column-field">浙江省杭州市滨江区江虹路459号英飞特科技园</span>
</td>
<td class="cell">
<span class="column-field">2019-03-12 22:24:36</span>
</td>
</tr>
<tr class="row">
<td class="cell">
<span class="column-field">李四</span>
</td>
<td class="cell">
<span class="column-field">18897127809</span>
</td>
<td class="cell">
<span class="column-field">浙江省杭州市滨江区秋溢路606号西可科技园</span>
</td>
<td class="cell">
<span class="column-field">2019-05-18 15:45:30</span>
</td>
</tr>
<tr class="row">
<td class="cell">
<span class="column-field">李华</span>
</td>
<td class="cell">
<span class="column-field">18749261214</span>
</td>
<td class="cell">
<span class="column-field">浙江省杭州市滨江区长河路590号东忠科技园</span>
</td>
<td class="cell">
<span class="column-field">2018-12-10 15:48:01</span>
</td>
</tr>
<tr class="row">
<td class="cell">
<span class="column-field">王五</span>
</td>
<td class="cell">
<span class="column-field">13579340020</span>
</td>
<td class="cell">
<span class="column-field">浙江省杭州市滨江区网商路599号网易大厦二期</span>
</td>
<td class="cell">
<span class="column-field">2018-07-16 01:32:06</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="root" direction="horizontal">
<div class="thumb" style="transform: translateX(0%); webkit-transform: translateX(0%);"></div>
</div>
<div class="root" direction="vertical">
<div class="thumb" style="transform: translateY(0%); webkit-transform: translateY(0%);"></div>
</div>
</div>
</div>
</div>
<div class="root" style="display: none;">
<div class="line" style="display: none;"></div>
<div class="mask" style="display: none;"></div>
</div>
<div>
<div style="display: none;">
</div>
<div style="display: none;">
</div>
<div style="display: none;">
</div>
<div style="display: none;">
</div>
</div>
</div>
<div class="root" style="border: 2px solid #ddd;">
<div class="table" position="static">
<div class="head" style="top: 0px;">
<table class="root head-table" line="true" sticky-fixed="true" striped="true">
<colgroup>
<col width="0">
<col width="0">
<col>
<col width="0">
</colgroup>
<thead>
<tr>
<th class="head-title boldHeader">
<span class="column-title" vusion-slot-name="title" vusion-slot-name-edit="title">
用户名
</span>
</th>
<th class="head-title boldHeader">
<span class="column-title" vusion-slot-name="title" vusion-slot-name-edit="title">
手机号码
</span>
</th>
<th class="head-title boldHeader">
<span class="column-title" vusion-slot-name="title" vusion-slot-name-edit="title">
地址
</span>
</th>
<th class="head-title boldHeader">
<span class="column-title" vusion-slot-name="title" vusion-slot-name-edit="title">
最近登录时间
</span>
</th>
</tr>
</thead>
</table>
</div>
<div class="body" sticky-fixed="true">
<div class="root scrollcview">
<div class="wrap">
<div>
<table class="root" line="true" sticky-fixed="true" striped="true">
<colgroup>
<col width="0">
<col width="0">
<col>
<col width="0">
</colgroup>
<tbody>
<tr class="row">
<td class="cell">
<span class="column-field">张三</span>
</td>
<td class="cell">
<span class="column-field">18612917895</span>
</td>
<td class="cell">
<span class="column-field">浙江省杭州市滨江区网商路599号网易大厦</span>
</td>
<td class="cell">
<span class="column-field">2018-05-28 21:52:11</span>
</td>
</tr>
<tr class="row">
<td class="cell">
<span class="column-field">小明</span>
</td>
<td class="cell">
<span class="column-field">13727160283</span>
</td>
<td class="cell">
<span class="column-field">浙江省杭州市滨江区江虹路459号英飞特科技园</span>
</td>
<td class="cell">
<span class="column-field">2019-03-12 22:24:36</span>
</td>
</tr>
<tr class="row">
<td class="cell">
<span class="column-field">李四</span>
</td>
<td class="cell">
<span class="column-field">18897127809</span>
</td>
<td class="cell">
<span class="column-field">浙江省杭州市滨江区秋溢路606号西可科技园</span>
</td>
<td class="cell">
<span class="column-field">2019-05-18 15:45:30</span>
</td>
</tr>
<tr class="row">
<td class="cell">
<span class="column-field">李华</span>
</td>
<td class="cell">
<span class="column-field">18749261214</span>
</td>
<td class="cell">
<span class="column-field">浙江省杭州市滨江区长河路590号东忠科技园</span>
</td>
<td class="cell">
<span class="column-field">2018-12-10 15:48:01</span>
</td>
</tr>
<tr class="row">
<td class="cell">
<span class="column-field">王五</span>
</td>
<td class="cell">
<span class="column-field">13579340020</span>
</td>
<td class="cell">
<span class="column-field">浙江省杭州市滨江区网商路599号网易大厦二期</span>
</td>
<td class="cell">
<span class="column-field">2018-07-16 01:32:06</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="root" direction="horizontal">
<div class="thumb" style="transform: translateX(0%); webkit-transform: translateX(0%);"></div>
</div>
<div class="root" direction="vertical">
<div class="thumb" style="transform: translateY(0%); webkit-transform: translateY(0%);"></div>
</div>
</div>
</div>
</div>
<div class="root" style="display: none;">
<div class="line" style="display: none;"></div>
<div class="mask" style="display: none;"></div>
</div>
<div>
<div style="display: none;">
</div>
<div style="display: none;">
</div>
<div style="display: none;">
</div>
<div style="display: none;">
</div>
</div>
</div>
</div>
`;

exports[`u-table-view.vue Demo-表格线条 1`] = `
<div>
<div class="root">
Expand Down
35 changes: 35 additions & 0 deletions src/components/u-table-view.vue/docs/cases.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2726,4 +2726,39 @@ export default {
},
};
</script>
```

### 表格有border

``` vue
<template>
<u-linear-layout direction="vertical">
<u-table-view striped :data="data" style="border: 2px solid #ddd;">
<u-table-view-column title="用户名" field="name" width="15%"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address"></u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
<u-table-view striped :data="data" style="border: 2px solid #ddd;" line>
<u-table-view-column title="用户名" field="name" width="15%"></u-table-view-column>
<u-table-view-column title="手机号码" field="phone" width="20%"></u-table-view-column>
<u-table-view-column title="地址" field="address"></u-table-view-column>
<u-table-view-column title="最近登录时间" field="loginTime" formatter="placeholder | date" width="20%"></u-table-view-column>
</u-table-view>
</u-linear-layout>
</template>
<script>
export default {
data() {
const baseData = [
{ name: '张三', phone: '18612917895', email: '[email protected]', address: '浙江省杭州市滨江区网商路599号网易大厦', createdTime: 1464421931000, loginTime: 1527515531000 },
{ name: '小明', phone: '13727160283', email: '[email protected]', address: '浙江省杭州市滨江区江虹路459号英飞特科技园', createdTime: 1520864676000, loginTime: 1552400676000 },
{ name: '李四', phone: '18897127809', email: '[email protected]', address: '浙江省杭州市滨江区秋溢路606号西可科技园', createdTime: 1494488730000, loginTime: 1558165530000 },
{ name: '李华', phone: '18749261214', email: '[email protected]', address: '浙江省杭州市滨江区长河路590号东忠科技园', createdTime: 1476073921000, loginTime: 1544428081000 },
{ name: '王五', phone: '13579340020', email: '[email protected]', address: '浙江省杭州市滨江区网商路599号网易大厦二期', createdTime: 1468614726000, loginTime: 1531675926000 },
];
return { data: baseData };
},
};
</script>
```
7 changes: 6 additions & 1 deletion src/components/u-table-view.vue/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
<slot name="title">{{ title }}</slot>
</div>
<slot name="config-columns"></slot>
<div :class="$style.table" v-for="(tableMeta, tableMetaIndex) in tableMetaList" :key="tableMeta.position" :position="tableMeta.position"
<div :class="$style.table" ref="tablewrap" v-for="(tableMeta, tableMetaIndex) in tableMetaList" :key="tableMeta.position" :position="tableMeta.position"
:style="{ width: tableMeta.position !== 'static' && number2Pixel(tableMeta.width), height: number2Pixel(tableHeight)}"
@scroll="onTableScroll" :shadow="(tableMeta.position === 'left' && !scrollXStart) || (tableMeta.position === 'right' && !scrollXEnd)">
<div v-if="showHead" :class="$style.head" ref="head" :stickingHead="stickingHead" :style="{ width: stickingHead ? number2Pixel(tableMeta.width) : '', top: number2Pixel(stickingHeadTop) }">
Expand Down Expand Up @@ -1084,7 +1084,12 @@ export default {
this.timer = setTimeout(() => {
this.timer = undefined;

// 当最外层加了border后，会导致内部的宽度大于tablewrap的宽度，会出滚动条：Bug-2792431057259520
let rootWidth = this.$el.offsetWidth;
const tablewrapWidth = this.$refs.tablewrap[0] && this.$refs.tablewrap[0].offsetWidth;
if (tablewrapWidth) {
rootWidth = tablewrapWidth;
}
if (!rootWidth) {
// 初始表格隐藏时，上面的值为0，需要特殊处理
let parentEl = this.$el && this.$el.parentElement;
Expand Down
Loading