drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fixed #2102

Browse source
This commit is contained in:
梁灏 2017-11-08 16:11:04 +08:00
parent 55f90d87de
commit b142865eff
2 changed files with 188 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

230
examples/routers/table.vue
View file

@ -699,86 +699,226 @@
<!--}--> <!--}-->
<!--</script>--> <!--</script>-->
<!--<template>-->
<!--<Table :columns="columns10" :data="data9"></Table>-->
<!--</template>-->
<!--<script>-->
<!--import expandRow from '../components/tableExpand.vue';-->
<!--export default {-->
<!--components: { expandRow },-->
<!--data () {-->
<!--return {-->
<!--columns10: [-->
<!--{-->
<!--type: 'expand',-->
<!--width: 50,-->
<!--render: (h, params) => {-->
<!--return h(expandRow, {-->
<!--props: {-->
<!--row: params.row-->
<!--}-->
<!--})-->
<!--}-->
<!--},-->
<!--{-->
<!--title: 'Name',-->
<!--key: 'name'-->
<!--},-->
<!--{-->
<!--title: 'Age',-->
<!--key: 'age',-->
<!--fixed: 'right'-->
<!--},-->
<!--{-->
<!--title: 'Address',-->
<!--key: 'address',-->
<!--fixed: 'right'-->
<!--}-->
<!--],-->
<!--data9: [-->
<!--{-->
<!--name: 'John Brown',-->
<!--age: 18,-->
<!--address: 'New York No. 1 Lake Park',-->
<!--job: 'Data engineer',-->
<!--interest: 'badminton',-->
<!--birthday: '1991-05-14',-->
<!--book: 'Steve Jobs',-->
<!--movie: 'The Prestige',-->
<!--music: 'I Cry'-->
<!--},-->
<!--{-->
<!--name: 'Jim Green',-->
<!--age: 25,-->
<!--address: 'London No. 1 Lake Park',-->
<!--job: 'Data Scientist',-->
<!--interest: 'volleyball',-->
<!--birthday: '1989-03-18',-->
<!--book: 'My Struggle',-->
<!--movie: 'Roman Holiday',-->
<!--music: 'My Heart Will Go On'-->
<!--},-->
<!--{-->
<!--name: 'Joe Black',-->
<!--age: 30,-->
<!--address: 'Sydney No. 1 Lake Park',-->
<!--job: 'Data Product Manager',-->
<!--interest: 'tennis',-->
<!--birthday: '1992-01-31',-->
<!--book: 'Win',-->
<!--movie: 'Jobs',-->
<!--music: 'Don’t Cry'-->
<!--},-->
<!--{-->
<!--name: 'Jon Snow',-->
<!--age: 26,-->
<!--address: 'Ottawa No. 2 Lake Park',-->
<!--job: 'Data Analyst',-->
<!--interest: 'snooker',-->
<!--birthday: '1988-7-25',-->
<!--book: 'A Dream in Red Mansions',-->
<!--movie: 'A Chinese Ghost Story',-->
<!--music: 'actor'-->
<!--}-->
<!--]-->
<!--}-->
<!--}-->
<!--}-->
<!--</script>-->
<template> <template>
<Table :columns="columns10" :data="data9"></Table> <div>
<div style="width: 550px;">
<Table height="200" border :columns="columns2" :data="data4"></Table>
</div>
<br><br><br>
<Table width="550" height="200" border :columns="columns2" :data="data4"></Table>
</div>
</template> </template>
<script> <script>
import expandRow from '../components/tableExpand.vue';
export default { export default {
components: { expandRow },
data () { data () {
return { return {
columns10: [ columns2: [
{
type: 'expand',
width: 50,
render: (h, params) => {
return h(expandRow, {
props: {
row: params.row
}
})
}
},
{ {
title: 'Name', title: 'Name',
key: 'name' key: 'name',
width: 100,
// fixed: 'left'
}, },
{ {
title: 'Age', title: 'Age',
key: 'age', key: 'age',
fixed: 'right' width: 100
},
{
title: 'Province',
key: 'province',
width: 100
},
{
title: 'City',
key: 'city',
width: 100
}, },
{ {
title: 'Address', title: 'Address',
key: 'address', key: 'address',
fixed: 'right' width: 200
},
{
title: 'Postcode',
key: 'zip',
width: 100
},
{
title: 'Action',
key: 'action',
fixed: 'right',
width: 120,
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, 'View'),
h('Button', {
props: {
type: 'text',
size: 'small'
}
}, 'Edit')
]);
}
} }
], ],
data9: [ data4: [
{ {
name: 'John Brown', name: 'John Brown',
age: 18, age: 18,
address: 'New York No. 1 Lake Park', address: 'New York No. 1 Lake Park',
job: 'Data engineer', province: 'America',
interest: 'badminton', city: 'New York',
birthday: '1991-05-14', zip: 100000
book: 'Steve Jobs',
movie: 'The Prestige',
music: 'I Cry'
}, },
{ {
name: 'Jim Green', name: 'Jim Green',
age: 25, age: 24,
address: 'London No. 1 Lake Park', address: 'Washington, D.C. No. 1 Lake Park',
job: 'Data Scientist', province: 'America',
interest: 'volleyball', city: 'Washington, D.C.',
birthday: '1989-03-18', zip: 100000
book: 'My Struggle',
movie: 'Roman Holiday',
music: 'My Heart Will Go On'
}, },
{ {
name: 'Joe Black', name: 'Joe Black',
age: 30, age: 30,
address: 'Sydney No. 1 Lake Park', address: 'Sydney No. 1 Lake Park',
job: 'Data Product Manager', province: 'Australian',
interest: 'tennis', city: 'Sydney',
birthday: '1992-01-31', zip: 100000
book: 'Win',
movie: 'Jobs',
music: 'Don’t Cry'
}, },
{ {
name: 'Jon Snow', name: 'Jon Snow',
age: 26, age: 26,
address: 'Ottawa No. 2 Lake Park', address: 'Ottawa No. 2 Lake Park',
job: 'Data Analyst', province: 'Canada',
interest: 'snooker', city: 'Ottawa',
birthday: '1988-7-25', zip: 100000
book: 'A Dream in Red Mansions', },
movie: 'A Chinese Ghost Story', {
music: 'actor' name: 'John Brown',
age: 18,
address: 'New York No. 1 Lake Park',
province: 'America',
city: 'New York',
zip: 100000
},
{
name: 'Jim Green',
age: 24,
address: 'Washington, D.C. No. 1 Lake Park',
province: 'America',
city: 'Washington, D.C.',
zip: 100000
},
{
name: 'Joe Black',
age: 30,
address: 'Sydney No. 1 Lake Park',
province: 'Australian',
city: 'Sydney',
zip: 100000
},
{
name: 'Jon Snow',
age: 26,
address: 'Ottawa No. 2 Lake Park',
province: 'Canada',
city: 'Ottawa',
zip: 100000
} }
] ]
} }

4
src/components/table/table.vue
View file

@ -293,7 +293,9 @@
if (this.bodyHeight !== 0) { if (this.bodyHeight !== 0) {
let height = this.bodyHeight + this.scrollBarWidth - 1; let height = this.bodyHeight + this.scrollBarWidth - 1;
if (this.width && this.width < this.tableWidth){ // #2102 里，如果 Table 没有设置 width，而是集成父级的 width，固定列也应该不包含滚动条高度，所以这里直接计算表格宽度
const tableWidth = parseInt(getStyle(this.$el, 'width')) - 1;
if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth){
height = this.bodyHeight; height = this.bodyHeight;
} }
// style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`; // style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;