Commit b142865eff219e2632027cb2590a04d8a181a377
1 parent
55f90d87
fixed #2102
Showing
2 changed files
with
188 additions
and
46 deletions
Show diff stats
examples/routers/table.vue
| @@ -699,86 +699,226 @@ | @@ -699,86 +699,226 @@ | ||
| 699 | <!--}--> | 699 | <!--}--> |
| 700 | <!--</script>--> | 700 | <!--</script>--> |
| 701 | 701 | ||
| 702 | +<!--<template>--> | ||
| 703 | + <!--<Table :columns="columns10" :data="data9"></Table>--> | ||
| 704 | +<!--</template>--> | ||
| 705 | +<!--<script>--> | ||
| 706 | + <!--import expandRow from '../components/tableExpand.vue';--> | ||
| 707 | + <!--export default {--> | ||
| 708 | + <!--components: { expandRow },--> | ||
| 709 | + <!--data () {--> | ||
| 710 | + <!--return {--> | ||
| 711 | + <!--columns10: [--> | ||
| 712 | + <!--{--> | ||
| 713 | + <!--type: 'expand',--> | ||
| 714 | + <!--width: 50,--> | ||
| 715 | + <!--render: (h, params) => {--> | ||
| 716 | + <!--return h(expandRow, {--> | ||
| 717 | + <!--props: {--> | ||
| 718 | + <!--row: params.row--> | ||
| 719 | + <!--}--> | ||
| 720 | + <!--})--> | ||
| 721 | + <!--}--> | ||
| 722 | + <!--},--> | ||
| 723 | + <!--{--> | ||
| 724 | + <!--title: 'Name',--> | ||
| 725 | + <!--key: 'name'--> | ||
| 726 | + <!--},--> | ||
| 727 | + <!--{--> | ||
| 728 | + <!--title: 'Age',--> | ||
| 729 | + <!--key: 'age',--> | ||
| 730 | + <!--fixed: 'right'--> | ||
| 731 | + <!--},--> | ||
| 732 | + <!--{--> | ||
| 733 | + <!--title: 'Address',--> | ||
| 734 | + <!--key: 'address',--> | ||
| 735 | + <!--fixed: 'right'--> | ||
| 736 | + <!--}--> | ||
| 737 | + <!--],--> | ||
| 738 | + <!--data9: [--> | ||
| 739 | + <!--{--> | ||
| 740 | + <!--name: 'John Brown',--> | ||
| 741 | + <!--age: 18,--> | ||
| 742 | + <!--address: 'New York No. 1 Lake Park',--> | ||
| 743 | + <!--job: 'Data engineer',--> | ||
| 744 | + <!--interest: 'badminton',--> | ||
| 745 | + <!--birthday: '1991-05-14',--> | ||
| 746 | + <!--book: 'Steve Jobs',--> | ||
| 747 | + <!--movie: 'The Prestige',--> | ||
| 748 | + <!--music: 'I Cry'--> | ||
| 749 | + <!--},--> | ||
| 750 | + <!--{--> | ||
| 751 | + <!--name: 'Jim Green',--> | ||
| 752 | + <!--age: 25,--> | ||
| 753 | + <!--address: 'London No. 1 Lake Park',--> | ||
| 754 | + <!--job: 'Data Scientist',--> | ||
| 755 | + <!--interest: 'volleyball',--> | ||
| 756 | + <!--birthday: '1989-03-18',--> | ||
| 757 | + <!--book: 'My Struggle',--> | ||
| 758 | + <!--movie: 'Roman Holiday',--> | ||
| 759 | + <!--music: 'My Heart Will Go On'--> | ||
| 760 | + <!--},--> | ||
| 761 | + <!--{--> | ||
| 762 | + <!--name: 'Joe Black',--> | ||
| 763 | + <!--age: 30,--> | ||
| 764 | + <!--address: 'Sydney No. 1 Lake Park',--> | ||
| 765 | + <!--job: 'Data Product Manager',--> | ||
| 766 | + <!--interest: 'tennis',--> | ||
| 767 | + <!--birthday: '1992-01-31',--> | ||
| 768 | + <!--book: 'Win',--> | ||
| 769 | + <!--movie: 'Jobs',--> | ||
| 770 | + <!--music: 'Don’t Cry'--> | ||
| 771 | + <!--},--> | ||
| 772 | + <!--{--> | ||
| 773 | + <!--name: 'Jon Snow',--> | ||
| 774 | + <!--age: 26,--> | ||
| 775 | + <!--address: 'Ottawa No. 2 Lake Park',--> | ||
| 776 | + <!--job: 'Data Analyst',--> | ||
| 777 | + <!--interest: 'snooker',--> | ||
| 778 | + <!--birthday: '1988-7-25',--> | ||
| 779 | + <!--book: 'A Dream in Red Mansions',--> | ||
| 780 | + <!--movie: 'A Chinese Ghost Story',--> | ||
| 781 | + <!--music: 'actor'--> | ||
| 782 | + <!--}--> | ||
| 783 | + <!--]--> | ||
| 784 | + <!--}--> | ||
| 785 | + <!--}--> | ||
| 786 | + <!--}--> | ||
| 787 | +<!--</script>--> | ||
| 788 | + | ||
| 789 | + | ||
| 702 | <template> | 790 | <template> |
| 703 | - <Table :columns="columns10" :data="data9"></Table> | 791 | + <div> |
| 792 | + <div style="width: 550px;"> | ||
| 793 | + <Table height="200" border :columns="columns2" :data="data4"></Table> | ||
| 794 | + </div> | ||
| 795 | + <br><br><br> | ||
| 796 | + <Table width="550" height="200" border :columns="columns2" :data="data4"></Table> | ||
| 797 | + </div> | ||
| 704 | </template> | 798 | </template> |
| 705 | <script> | 799 | <script> |
| 706 | - import expandRow from '../components/tableExpand.vue'; | ||
| 707 | export default { | 800 | export default { |
| 708 | - components: { expandRow }, | ||
| 709 | data () { | 801 | data () { |
| 710 | return { | 802 | return { |
| 711 | - columns10: [ | ||
| 712 | - { | ||
| 713 | - type: 'expand', | ||
| 714 | - width: 50, | ||
| 715 | - render: (h, params) => { | ||
| 716 | - return h(expandRow, { | ||
| 717 | - props: { | ||
| 718 | - row: params.row | ||
| 719 | - } | ||
| 720 | - }) | ||
| 721 | - } | ||
| 722 | - }, | 803 | + columns2: [ |
| 723 | { | 804 | { |
| 724 | title: 'Name', | 805 | title: 'Name', |
| 725 | - key: 'name' | 806 | + key: 'name', |
| 807 | + width: 100, | ||
| 808 | +// fixed: 'left' | ||
| 726 | }, | 809 | }, |
| 727 | { | 810 | { |
| 728 | title: 'Age', | 811 | title: 'Age', |
| 729 | key: 'age', | 812 | key: 'age', |
| 730 | - fixed: 'right' | 813 | + width: 100 |
| 814 | + }, | ||
| 815 | + { | ||
| 816 | + title: 'Province', | ||
| 817 | + key: 'province', | ||
| 818 | + width: 100 | ||
| 819 | + }, | ||
| 820 | + { | ||
| 821 | + title: 'City', | ||
| 822 | + key: 'city', | ||
| 823 | + width: 100 | ||
| 731 | }, | 824 | }, |
| 732 | { | 825 | { |
| 733 | title: 'Address', | 826 | title: 'Address', |
| 734 | key: 'address', | 827 | key: 'address', |
| 735 | - fixed: 'right' | 828 | + width: 200 |
| 829 | + }, | ||
| 830 | + { | ||
| 831 | + title: 'Postcode', | ||
| 832 | + key: 'zip', | ||
| 833 | + width: 100 | ||
| 834 | + }, | ||
| 835 | + { | ||
| 836 | + title: 'Action', | ||
| 837 | + key: 'action', | ||
| 838 | + fixed: 'right', | ||
| 839 | + width: 120, | ||
| 840 | + render: (h, params) => { | ||
| 841 | + return h('div', [ | ||
| 842 | + h('Button', { | ||
| 843 | + props: { | ||
| 844 | + type: 'text', | ||
| 845 | + size: 'small' | ||
| 846 | + } | ||
| 847 | + }, 'View'), | ||
| 848 | + h('Button', { | ||
| 849 | + props: { | ||
| 850 | + type: 'text', | ||
| 851 | + size: 'small' | ||
| 852 | + } | ||
| 853 | + }, 'Edit') | ||
| 854 | + ]); | ||
| 855 | + } | ||
| 736 | } | 856 | } |
| 737 | ], | 857 | ], |
| 738 | - data9: [ | 858 | + data4: [ |
| 859 | + { | ||
| 860 | + name: 'John Brown', | ||
| 861 | + age: 18, | ||
| 862 | + address: 'New York No. 1 Lake Park', | ||
| 863 | + province: 'America', | ||
| 864 | + city: 'New York', | ||
| 865 | + zip: 100000 | ||
| 866 | + }, | ||
| 867 | + { | ||
| 868 | + name: 'Jim Green', | ||
| 869 | + age: 24, | ||
| 870 | + address: 'Washington, D.C. No. 1 Lake Park', | ||
| 871 | + province: 'America', | ||
| 872 | + city: 'Washington, D.C.', | ||
| 873 | + zip: 100000 | ||
| 874 | + }, | ||
| 875 | + { | ||
| 876 | + name: 'Joe Black', | ||
| 877 | + age: 30, | ||
| 878 | + address: 'Sydney No. 1 Lake Park', | ||
| 879 | + province: 'Australian', | ||
| 880 | + city: 'Sydney', | ||
| 881 | + zip: 100000 | ||
| 882 | + }, | ||
| 883 | + { | ||
| 884 | + name: 'Jon Snow', | ||
| 885 | + age: 26, | ||
| 886 | + address: 'Ottawa No. 2 Lake Park', | ||
| 887 | + province: 'Canada', | ||
| 888 | + city: 'Ottawa', | ||
| 889 | + zip: 100000 | ||
| 890 | + }, | ||
| 739 | { | 891 | { |
| 740 | name: 'John Brown', | 892 | name: 'John Brown', |
| 741 | age: 18, | 893 | age: 18, |
| 742 | address: 'New York No. 1 Lake Park', | 894 | address: 'New York No. 1 Lake Park', |
| 743 | - job: 'Data engineer', | ||
| 744 | - interest: 'badminton', | ||
| 745 | - birthday: '1991-05-14', | ||
| 746 | - book: 'Steve Jobs', | ||
| 747 | - movie: 'The Prestige', | ||
| 748 | - music: 'I Cry' | 895 | + province: 'America', |
| 896 | + city: 'New York', | ||
| 897 | + zip: 100000 | ||
| 749 | }, | 898 | }, |
| 750 | { | 899 | { |
| 751 | name: 'Jim Green', | 900 | name: 'Jim Green', |
| 752 | - age: 25, | ||
| 753 | - address: 'London No. 1 Lake Park', | ||
| 754 | - job: 'Data Scientist', | ||
| 755 | - interest: 'volleyball', | ||
| 756 | - birthday: '1989-03-18', | ||
| 757 | - book: 'My Struggle', | ||
| 758 | - movie: 'Roman Holiday', | ||
| 759 | - music: 'My Heart Will Go On' | 901 | + age: 24, |
| 902 | + address: 'Washington, D.C. No. 1 Lake Park', | ||
| 903 | + province: 'America', | ||
| 904 | + city: 'Washington, D.C.', | ||
| 905 | + zip: 100000 | ||
| 760 | }, | 906 | }, |
| 761 | { | 907 | { |
| 762 | name: 'Joe Black', | 908 | name: 'Joe Black', |
| 763 | age: 30, | 909 | age: 30, |
| 764 | address: 'Sydney No. 1 Lake Park', | 910 | address: 'Sydney No. 1 Lake Park', |
| 765 | - job: 'Data Product Manager', | ||
| 766 | - interest: 'tennis', | ||
| 767 | - birthday: '1992-01-31', | ||
| 768 | - book: 'Win', | ||
| 769 | - movie: 'Jobs', | ||
| 770 | - music: 'Don’t Cry' | 911 | + province: 'Australian', |
| 912 | + city: 'Sydney', | ||
| 913 | + zip: 100000 | ||
| 771 | }, | 914 | }, |
| 772 | { | 915 | { |
| 773 | name: 'Jon Snow', | 916 | name: 'Jon Snow', |
| 774 | age: 26, | 917 | age: 26, |
| 775 | address: 'Ottawa No. 2 Lake Park', | 918 | address: 'Ottawa No. 2 Lake Park', |
| 776 | - job: 'Data Analyst', | ||
| 777 | - interest: 'snooker', | ||
| 778 | - birthday: '1988-7-25', | ||
| 779 | - book: 'A Dream in Red Mansions', | ||
| 780 | - movie: 'A Chinese Ghost Story', | ||
| 781 | - music: 'actor' | 919 | + province: 'Canada', |
| 920 | + city: 'Ottawa', | ||
| 921 | + zip: 100000 | ||
| 782 | } | 922 | } |
| 783 | ] | 923 | ] |
| 784 | } | 924 | } |
src/components/table/table.vue
| @@ -293,7 +293,9 @@ | @@ -293,7 +293,9 @@ | ||
| 293 | if (this.bodyHeight !== 0) { | 293 | if (this.bodyHeight !== 0) { |
| 294 | let height = this.bodyHeight + this.scrollBarWidth - 1; | 294 | let height = this.bodyHeight + this.scrollBarWidth - 1; |
| 295 | 295 | ||
| 296 | - if (this.width && this.width < this.tableWidth){ | 296 | + // #2102 里，如果 Table 没有设置 width，而是集成父级的 width，固定列也应该不包含滚动条高度，所以这里直接计算表格宽度 |
| 297 | + const tableWidth = parseInt(getStyle(this.$el, 'width')) - 1; | ||
| 298 | + if ((this.width && this.width < this.tableWidth) || tableWidth < this.tableWidth){ | ||
| 297 | height = this.bodyHeight; | 299 | height = this.bodyHeight; |
| 298 | } | 300 | } |
| 299 | // style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`; | 301 | // style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`; |