Skip to content

Commit

Permalink
Merge pull request #797 from vusion/hotfix-test/utableview
Browse files Browse the repository at this point in the history 
fix(TableView): 表格最外层设置border导致表格有滚动条
  • Loading branch information
@myronliu347
myronliu347 authored Jan 27, 2024
2 parents 69494b0 + 115ef29 commit 55c12e4
Show file tree
Hide file tree
Showing 3 changed files with 338 additions and 1 deletion.
297 changes: 297 additions & 0 deletions src/components/u-table-view.vue/__tests__/__snapshots__/demo.test.js.snap
View file
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
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
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

0 comments on commit 55c12e4

Please sign in to comment.