chenhaodong / mew-iview

Commit 8a392d25fc5e603db876fd1fc8afbf48ab6b7409

Authored by 梁灏
1 parent 6c97e57a

Table expand support set column header, and close #1299

Showing 3 changed files with 97 additions and 131 deletions   Show diff stats
Inline Side-by-side
examples/components/test.vue
  Show/Hide comments   View file @8a392d2
1 <template> 1 <template>
2 - <Dropdown transfer>  
3 - <a href="javascript:void(0)">  
4 - 下拉菜单  
5 - <Icon type="arrow-down-b"></Icon>  
6 - </a>  
7 - <Dropdown-menu slot="list">  
8 - <Dropdown-item>驴打滚</Dropdown-item>  
9 - <Dropdown-item>炸酱面</Dropdown-item>  
10 - <Dropdown-item disabled>豆汁儿</Dropdown-item>  
11 - <Dropdown-item>冰糖葫芦</Dropdown-item>  
12 - <Dropdown-item divided>北京烤鸭</Dropdown-item>  
13 - </Dropdown-menu>  
14 - </Dropdown> 2 + <div>
  3 + <Row class="expand-row">
  4 + <Col span="8">
  5 + <span class="expand-key">职业：</span>
  6 + <span class="expand-value">{{ row.job }}</span>
  7 + </Col>
  8 + <Col span="8">
  9 + <span class="expand-key">兴趣：</span>
  10 + <span class="expand-value">{{ row.interest }}</span>
  11 + </Col>
  12 + <Col span="8">
  13 + <span class="expand-key">生日：</span>
  14 + <span class="expand-value">{{ row.birthday }}</span>
  15 + </Col>
  16 + </Row>
  17 + <Row>
  18 + <Col span="8">
  19 + <span class="expand-key">最喜欢的书：</span>
  20 + <span class="expand-value">《{{ row.book }}》</span>
  21 + </Col>
  22 + <Col span="8">
  23 + <span class="expand-key">最喜欢的电影：</span>
  24 + <span class="expand-value">{{ row.movie }}</span>
  25 + </Col>
  26 + <Col span="8">
  27 + <span class="expand-key">最喜欢的音乐：</span>
  28 + <span class="expand-value">{{ row.music }}</span>
  29 + </Col>
  30 + </Row>
  31 + </div>
15 </template> 32 </template>
16 <script> 33 <script>
17 export default { 34 export default {
18 -  
19 - }  
20 -</script> 35 + props: {
  36 + row: Object
  37 + }
  38 + };
  39 +</script>
21 \ No newline at end of file 40 \ No newline at end of file
examples/routers/table.vue
  Show/Hide comments   View file @8a392d2
1 <template> 1 <template>
2 - <div>  
3 - <Table  
4 - width="500"  
5 - height="200"  
6 - border  
7 - highlight-row  
8 - :columns="columns2"  
9 - @on-selection-change="change2"  
10 - :data="data3"></Table>  
11 - <Button @click="addData">添加数据</Button>  
12 - </div> 2 + <Table :columns="columns10" :data="data9"></Table>
13 </template> 3 </template>
14 <script> 4 <script>
15 - import test from '../components/test.vue'; 5 + import expandRow from '../components/tableExpand.vue';
16 export default { 6 export default {
  7 + components: { expandRow },
17 data () { 8 data () {
18 return { 9 return {
19 - columns2: [  
20 -// {  
21 -// type: 'selection',  
22 -// width: 60,  
23 -// align: 'center'  
24 -// }, 10 + columns10: [
25 { 11 {
26 - title: '姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名姓名',  
27 - key: 'name',  
28 - width: 200,  
29 -// sortable: true,  
30 -// fixed: 'right', 12 + type: 'expand',
  13 + width: 100,
  14 + title: '展',
  15 + renderHeader (h) {
  16 + return h('i', '展开')
  17 + },
31 render: (h, params) => { 18 render: (h, params) => {
32 - return h('div', [  
33 - h('Button', {  
34 - props: {  
35 - type: 'primary',  
36 - size: 'small'  
37 - },  
38 - on: {  
39 - click: this.edit  
40 - },  
41 - }, '修改')  
42 - ]); 19 + return h(expandRow, {
  20 + props: {
  21 + row: params.row
  22 + }
  23 + })
43 } 24 }
44 }, 25 },
45 { 26 {
46 - title: '年龄',  
47 - key: 'age',  
48 - sortable: true,  
49 -// sortType: 'asc',  
50 - width: 200 27 + title: '姓名',
  28 + key: 'name'
51 }, 29 },
52 { 30 {
53 - title: '省份',  
54 - key: 'province',  
55 - sortable: true,  
56 -// fixed: 'right',  
57 - width: 200 31 + title: '年龄',
  32 + key: 'age'
58 }, 33 },
59 -// {  
60 -// title: '市区',  
61 -// key: 'city',  
62 -// width: 100  
63 -// },  
64 -// {  
65 -// title: '地址',  
66 -// key: 'address',  
67 -// width: 200  
68 -// },  
69 -// {  
70 -// title: '邮编',  
71 -// key: 'zip',  
72 -// width: 100  
73 -// },  
74 -// {  
75 -// title: '操作',  
76 -// key: 'action',  
77 -// fixed: 'right',  
78 -// width: 120,  
79 -// render: (h, params) => {  
80 -// return h(test);  
81 -// }  
82 -// } 34 + {
  35 + title: '地址',
  36 + key: 'address'
  37 + }
83 ], 38 ],
84 - data3: [ 39 + data9: [
85 { 40 {
86 name: '王小明', 41 name: '王小明',
87 age: 18, 42 age: 18,
88 address: '北京市朝阳区芍药居', 43 address: '北京市朝阳区芍药居',
89 - province: '北京市',  
90 - city: '朝阳区',  
91 - zip: 100000 44 + job: '数据工程师',
  45 + interest: '羽毛球',
  46 + birthday: '1991-05-14',
  47 + book: '乔布斯传',
  48 + movie: '致命魔术',
  49 + music: 'I Cry'
92 }, 50 },
93 { 51 {
94 name: '张小刚', 52 name: '张小刚',
95 age: 25, 53 age: 25,
96 address: '北京市海淀区西二旗', 54 address: '北京市海淀区西二旗',
97 - province: '北京市',  
98 - city: '海淀区',  
99 - zip: 100000 55 + job: '数据科学家',
  56 + interest: '排球',
  57 + birthday: '1989-03-18',
  58 + book: '我的奋斗',
  59 + movie: '罗马假日',
  60 + music: 'My Heart Will Go On'
100 }, 61 },
101 -// {  
102 -// name: '李小红',  
103 -// age: 30,  
104 -// address: '上海市浦东新区世纪大道',  
105 -// province: '上海市',  
106 -// city: '浦东新区',  
107 -// zip: 100000  
108 -// },  
109 -// {  
110 -// name: '周小伟',  
111 -// age: 26,  
112 -// address: '深圳市南山区深南大道',  
113 -// province: '广东',  
114 -// city: '南山区',  
115 -// zip: 100000  
116 -// } 62 + {
  63 + name: '李小红',
  64 + age: 30,
  65 + address: '上海市浦东新区世纪大道',
  66 + job: '数据产品经理',
  67 + interest: '网球',
  68 + birthday: '1992-01-31',
  69 + book: '赢',
  70 + movie: '乔布斯',
  71 + music: 'Don’t Cry'
  72 + },
  73 + {
  74 + name: '周小伟',
  75 + age: 26,
  76 + address: '深圳市南山区深南大道',
  77 + job: '数据分析师',
  78 + interest: '桌球，跑步',
  79 + birthday: '1988-7-25',
  80 + book: '红楼梦',
  81 + movie: '倩女幽魂',
  82 + music: '演员'
  83 + }
117 ] 84 ]
118 } 85 }
119 - },  
120 - methods: {  
121 - change1 (d, l) {  
122 -// console.log(d)  
123 -// console.log(l)  
124 - },  
125 - change2 (d, l) {  
126 - console.log(d);  
127 - console.log(l);  
128 - },  
129 - addData () {  
130 - this.data3.push({  
131 - name: '周小伟',  
132 - age: 26,  
133 - address: '深圳市南山区深南大道',  
134 - province: '广东',  
135 - city: '南山区',  
136 - zip: 100000  
137 - })  
138 - },  
139 - edit () {  
140 -  
141 - }  
142 } 86 }
143 } 87 }
144 </script> 88 </script>
145 \ No newline at end of file 89 \ No newline at end of file
src/components/table/table-head.vue
  Show/Hide comments   View file @8a392d2
@@ -7,7 +7,10 @@ @@ -7,7 +7,10 @@
7 <tr> 7 <tr>
8 <th v-for="(column, index) in columns" :class="alignCls(column)"> 8 <th v-for="(column, index) in columns" :class="alignCls(column)">
9 <div :class="cellClasses(column)"> 9 <div :class="cellClasses(column)">
10 - <template v-if="column.type === 'expand'"></template> 10 + <template v-if="column.type === 'expand'">
  11 + <span v-if="!column.renderHeader">{{ column.title || '' }}</span>
  12 + <render-header v-else :render="column.renderHeader" :column="column" :index="index"></render-header>
  13 + </template>
11 <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template> 14 <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
12 <template v-else> 15 <template v-else>
13 <span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span> 16 <span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span>