github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: table ellipsis not work at fixed column #2916 #3021

pull/3052/head
tanjinzhou 2020-10-27 16:13:13 +08:00
parent 5597ec0a91
commit dae751368b
3 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

@ -1023,7 +1023,7 @@ exports[`renders ./antdv-demo/docs/table/demo/fixed-columns.md correctly 1`] = `
<!----> <!---->
<div class="ant-table-body-outer"> <div class="ant-table-body-outer">
<div class="ant-table-body-inner"> <div class="ant-table-body-inner">
<table class="ant-table-fixed"> <table class="ant-table-fixed" style="width: 200px;">
<colgroup> <colgroup>
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
@ -1054,7 +1054,7 @@ exports[`renders ./antdv-demo/docs/table/demo/fixed-columns.md correctly 1`] = `
<!----> <!---->
<div class="ant-table-body-outer"> <div class="ant-table-body-outer">
<div class="ant-table-body-inner"> <div class="ant-table-body-inner">
<table class="ant-table-fixed"> <table class="ant-table-fixed" style="width: 100px;">
<colgroup> <colgroup>
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
</colgroup> </colgroup>
@ -1291,7 +1291,7 @@ exports[`renders ./antdv-demo/docs/table/demo/fixed-columns-header.md correctly
</div> </div>
<div class="ant-table-fixed-left"> <div class="ant-table-fixed-left">
<div class="ant-table-header"> <div class="ant-table-header">
<table class="ant-table-fixed"> <table class="ant-table-fixed" style="width: 200px;">
<colgroup> <colgroup>
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
@ -1308,7 +1308,7 @@ exports[`renders ./antdv-demo/docs/table/demo/fixed-columns-header.md correctly
</div> </div>
<div class="ant-table-body-outer"> <div class="ant-table-body-outer">
<div class="ant-table-body-inner" style="max-height: 300px; overflow-y: scroll;"> <div class="ant-table-body-inner" style="max-height: 300px; overflow-y: scroll;">
<table class="ant-table-fixed"> <table class="ant-table-fixed" style="width: 200px;">
<colgroup> <colgroup>
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
@ -1361,7 +1361,7 @@ exports[`renders ./antdv-demo/docs/table/demo/fixed-columns-header.md correctly
</div> </div>
<div class="ant-table-fixed-right"> <div class="ant-table-fixed-right">
<div class="ant-table-header"> <div class="ant-table-header">
<table class="ant-table-fixed"> <table class="ant-table-fixed" style="width: 100px;">
<colgroup> <colgroup>
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
</colgroup> </colgroup>
@ -1375,7 +1375,7 @@ exports[`renders ./antdv-demo/docs/table/demo/fixed-columns-header.md correctly
</div> </div>
<div class="ant-table-body-outer"> <div class="ant-table-body-outer">
<div class="ant-table-body-inner" style="max-height: 300px; overflow-y: scroll;"> <div class="ant-table-body-inner" style="max-height: 300px; overflow-y: scroll;">
<table class="ant-table-fixed"> <table class="ant-table-fixed" style="width: 100px;">
<colgroup> <colgroup>
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
</colgroup> </colgroup>
@ -1919,7 +1919,7 @@ exports[`renders ./antdv-demo/docs/table/demo/grouping-columns.md correctly 1`]
</div> </div>
<div class="ant-table-fixed-left"> <div class="ant-table-fixed-left">
<div class="ant-table-header"> <div class="ant-table-header">
<table class="ant-table-fixed"> <table class="ant-table-fixed" style="width: 100px;">
<colgroup> <colgroup>
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
</colgroup> </colgroup>
@ -1935,7 +1935,7 @@ exports[`renders ./antdv-demo/docs/table/demo/grouping-columns.md correctly 1`]
</div> </div>
<div class="ant-table-body-outer"> <div class="ant-table-body-outer">
<div class="ant-table-body-inner" style="max-height: 240px; overflow-y: scroll;"> <div class="ant-table-body-inner" style="max-height: 240px; overflow-y: scroll;">
<table class="ant-table-fixed"> <table class="ant-table-fixed" style="width: 100px;">
<colgroup> <colgroup>
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
</colgroup> </colgroup>
@ -1977,7 +1977,7 @@ exports[`renders ./antdv-demo/docs/table/demo/grouping-columns.md correctly 1`]
</div> </div>
<div class="ant-table-fixed-right"> <div class="ant-table-fixed-right">
<div class="ant-table-header"> <div class="ant-table-header">
<table class="ant-table-fixed"> <table class="ant-table-fixed" style="width: 80px;">
<colgroup> <colgroup>
<col style="width: 80px; min-width: 80px;"> <col style="width: 80px; min-width: 80px;">
</colgroup> </colgroup>
@ -1991,7 +1991,7 @@ exports[`renders ./antdv-demo/docs/table/demo/grouping-columns.md correctly 1`]
</div> </div>
<div class="ant-table-body-outer"> <div class="ant-table-body-outer">
<div class="ant-table-body-inner" style="max-height: 240px; overflow-y: scroll;"> <div class="ant-table-body-inner" style="max-height: 240px; overflow-y: scroll;">
<table class="ant-table-fixed"> <table class="ant-table-fixed" style="width: 80px;">
<colgroup> <colgroup>
<col style="width: 80px; min-width: 80px;"> <col style="width: 80px; min-width: 80px;">
</colgroup> </colgroup>

4
components/table/__tests__/__snapshots__/empty.test.js.snap
View File

@ -176,7 +176,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
<!----> <!---->
<div class="ant-table-body-outer"> <div class="ant-table-body-outer">
<div class="ant-table-body-inner"> <div class="ant-table-body-inner">
<table class="ant-table-fixed"> <table class="ant-table-fixed" style="width: 200px;">
<colgroup> <colgroup>
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
@ -198,7 +198,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
<!----> <!---->
<div class="ant-table-body-outer"> <div class="ant-table-body-outer">
<div class="ant-table-body-inner"> <div class="ant-table-body-inner">
<table class="ant-table-fixed"> <table class="ant-table-fixed" style="width: 100px;">
<colgroup> <colgroup>
<col style="width: 100px; min-width: 100px;"> <col style="width: 100px; min-width: 100px;">
</colgroup> </colgroup>

11
components/vc-table/src/BaseTable.jsx
View File

@ -146,7 +146,7 @@ const BaseTable = {
render() { render() {
const { sComponents: components, prefixCls, scroll, data, getBodyWrapper } = this.table; const { sComponents: components, prefixCls, scroll, data, getBodyWrapper } = this.table;
const { expander, tableClassName, hasHead, hasBody, fixed, isAnyColumnsFixed } = this.$props; const { expander, tableClassName, hasHead, hasBody, fixed, isAnyColumnsFixed } = this.$props;
const columns = this.getColumns();
const tableStyle = {}; const tableStyle = {};
if (!fixed && scroll.x) { if (!fixed && scroll.x) {
@ -158,6 +158,14 @@ const BaseTable = {
tableStyle.width = tableStyle.width =
typeof tableStyle.width === 'number' ? `${tableStyle.width}px` : tableStyle.width; typeof tableStyle.width === 'number' ? `${tableStyle.width}px` : tableStyle.width;
} }
if(fixed) {
const width = columns.reduce((sum, {width: w})=>{
return sum + parseFloat(w, 10);
}, 0);
if(width > 0) {
tableStyle.width = width + 'px';
}
}
const Table = hasBody ? components.table : 'table'; const Table = hasBody ? components.table : 'table';
const BodyWrapper = components.body.wrapper; const BodyWrapper = components.body.wrapper;
@ -169,7 +177,6 @@ const BaseTable = {
body = getBodyWrapper(body); body = getBodyWrapper(body);
} }
} }
const columns = this.getColumns();
return ( return (
<Table class={tableClassName} style={tableStyle} key="table"> <Table class={tableClassName} style={tableStyle} key="table">
<ColGroup columns={columns} fixed={fixed} /> <ColGroup columns={columns} fixed={fixed} />