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 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 32 </template>
16 33 <script>
17 34 export default {
18   -
19   - }
20   -</script>
  35 + props: {
  36 + row: Object
  37 + }
  38 + };
  39 +</script>
21 40 \ No newline at end of file
... ...
examples/routers/table.vue
  Show/Hide comments   View file @8a392d2
1 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 3 </template>
14 4 <script>
15   - import test from '../components/test.vue';
  5 + import expandRow from '../components/tableExpand.vue';
16 6 export default {
  7 + components: { expandRow },
17 8 data () {
18 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 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 41 name: '王小明',
87 42 age: 18,
88 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 52 name: '张小刚',
95 53 age: 25,
96 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 88 </script>
145 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 <tr>
8 8 <th v-for="(column, index) in columns" :class="alignCls(column)">
9 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 14 <template v-else-if="column.type === 'selection'"><Checkbox :value="isSelectAll" @on-change="selectAll"></Checkbox></template>
12 15 <template v-else>
13 16 <span v-if="!column.renderHeader" @click="handleSortByHead(index)">{{ column.title || '#' }}</span>
... ...