chenhaodong / mew-iview

Commit b142865eff219e2632027cb2590a04d8a181a377

Authored by 梁灏
1 parent 55f90d87

fixed #2102

Showing 2 changed files with 188 additions and 46 deletions   Show diff stats
Inline Side-by-side
examples/routers/table.vue
  Show/Hide comments   View file @b142865
... ... @@ -699,86 +699,226 @@
699 699 <!--}-->
700 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 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 798 </template>
705 799 <script>
706   - import expandRow from '../components/tableExpand.vue';
707 800 export default {
708   - components: { expandRow },
709 801 data () {
710 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 805 title: 'Name',
725   - key: 'name'
  806 + key: 'name',
  807 + width: 100,
  808 +// fixed: 'left'
726 809 },
727 810 {
728 811 title: 'Age',
729 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 826 title: 'Address',
734 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 892 name: 'John Brown',
741 893 age: 18,
742 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 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 908 name: 'Joe Black',
763 909 age: 30,
764 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 916 name: 'Jon Snow',
774 917 age: 26,
775 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
  Show/Hide comments   View file @b142865
... ... @@ -293,7 +293,9 @@
293 293 if (this.bodyHeight !== 0) {
294 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 299 height = this.bodyHeight;
298 300 }
299 301 // style.height = this.scrollBarWidth > 0 ? `${this.bodyHeight}px` : `${this.bodyHeight - 1}px`;
... ...