Commit 51356c2cd25ce24fe989ca727328979bb37fa76d
1 parent
548eac43
fixed #658
Showing
2 changed files
with
113 additions
and
161 deletions
Show diff stats
examples/routers/table.vue
| 1 | -<!--<template>--> | ||
| 2 | - <!--<div>--> | ||
| 3 | - <!--<Table--> | ||
| 4 | - <!--width="500"--> | ||
| 5 | - <!--border--> | ||
| 6 | - <!--highlight-row--> | ||
| 7 | - <!--:columns="columns2"--> | ||
| 8 | - <!--@on-selection-change="change2"--> | ||
| 9 | - <!--:data="data3"></Table>--> | ||
| 10 | - <!--<Button @click="addData">添加数据</Button>--> | ||
| 11 | - <!--</div>--> | ||
| 12 | -<!--</template>--> | ||
| 13 | -<!--<script>--> | ||
| 14 | - <!--import test from '../components/test.vue';--> | ||
| 15 | - <!--export default {--> | ||
| 16 | - <!--data () {--> | ||
| 17 | - <!--return {--> | ||
| 18 | - <!--columns2: [--> | ||
| 19 | -<!--// {--> | ||
| 20 | -<!--// type: 'selection',--> | ||
| 21 | -<!--// width: 60,--> | ||
| 22 | -<!--// align: 'center'--> | ||
| 23 | -<!--// },--> | ||
| 24 | - <!--{--> | ||
| 25 | - <!--title: '姓名',--> | ||
| 26 | - <!--key: 'name',--> | ||
| 27 | - <!--width: 100,--> | ||
| 28 | -<!--// sortable: true,--> | ||
| 29 | - <!--fixed: 'right',--> | ||
| 30 | - <!--render: (h, params) => {--> | ||
| 31 | - <!--return h('div', [--> | ||
| 32 | - <!--h('Button', {--> | ||
| 33 | - <!--props: {--> | ||
| 34 | - <!--type: 'primary',--> | ||
| 35 | - <!--size: 'small'--> | ||
| 36 | - <!--},--> | ||
| 37 | - <!--on: {--> | ||
| 38 | - <!--click: this.edit--> | ||
| 39 | - <!--},--> | ||
| 40 | - <!--}, '修改')--> | ||
| 41 | - <!--]);--> | ||
| 42 | - <!--}--> | ||
| 43 | - <!--},--> | ||
| 44 | - <!--{--> | ||
| 45 | - <!--title: '年龄',--> | ||
| 46 | - <!--key: 'age',--> | ||
| 47 | - <!--sortable: true,--> | ||
| 48 | -<!--// width: 100--> | ||
| 49 | - <!--},--> | ||
| 50 | - <!--{--> | ||
| 51 | - <!--title: '省份',--> | ||
| 52 | - <!--key: 'province',--> | ||
| 53 | - <!--sortable: true,--> | ||
| 54 | -<!--// fixed: 'right',--> | ||
| 55 | -<!--// width: 100--> | ||
| 56 | - <!--},--> | ||
| 57 | -<!--// {--> | ||
| 58 | -<!--// title: '市区',--> | ||
| 59 | -<!--// key: 'city',--> | ||
| 60 | -<!--// width: 100--> | ||
| 61 | -<!--// },--> | ||
| 62 | -<!--// {--> | ||
| 63 | -<!--// title: '地址',--> | ||
| 64 | -<!--// key: 'address',--> | ||
| 65 | -<!--// width: 200--> | ||
| 66 | -<!--// },--> | ||
| 67 | -<!--// {--> | ||
| 68 | -<!--// title: '邮编',--> | ||
| 69 | -<!--// key: 'zip',--> | ||
| 70 | -<!--// width: 100--> | ||
| 71 | -<!--// },--> | ||
| 72 | -<!--// {--> | ||
| 73 | -<!--// title: '操作',--> | ||
| 74 | -<!--// key: 'action',--> | ||
| 75 | -<!--// fixed: 'right',--> | ||
| 76 | -<!--// width: 120,--> | ||
| 77 | -<!--// render: (h, params) => {--> | ||
| 78 | -<!--// return h(test);--> | ||
| 79 | -<!--// }--> | ||
| 80 | -<!--// }--> | ||
| 81 | - <!--],--> | ||
| 82 | - <!--data3: [--> | ||
| 83 | -<!--// {--> | ||
| 84 | -<!--// name: '王小明',--> | ||
| 85 | -<!--// age: 18,--> | ||
| 86 | -<!--// address: '北京市朝阳区芍药居',--> | ||
| 87 | -<!--// province: '北京市',--> | ||
| 88 | -<!--// city: '朝阳区',--> | ||
| 89 | -<!--// zip: 100000--> | ||
| 90 | -<!--// },--> | ||
| 91 | -<!--// {--> | ||
| 92 | -<!--// name: '张小刚',--> | ||
| 93 | -<!--// age: 25,--> | ||
| 94 | -<!--// address: '北京市海淀区西二旗',--> | ||
| 95 | -<!--// province: '北京市',--> | ||
| 96 | -<!--// city: '海淀区',--> | ||
| 97 | -<!--// zip: 100000--> | ||
| 98 | -<!--// },--> | ||
| 99 | -<!--// {--> | ||
| 100 | -<!--// name: '李小红',--> | ||
| 101 | -<!--// age: 30,--> | ||
| 102 | -<!--// address: '上海市浦东新区世纪大道',--> | ||
| 103 | -<!--// province: '上海市',--> | ||
| 104 | -<!--// city: '浦东新区',--> | ||
| 105 | -<!--// zip: 100000--> | ||
| 106 | -<!--// },--> | ||
| 107 | -<!--// {--> | ||
| 108 | -<!--// name: '周小伟',--> | ||
| 109 | -<!--// age: 26,--> | ||
| 110 | -<!--// address: '深圳市南山区深南大道',--> | ||
| 111 | -<!--// province: '广东',--> | ||
| 112 | -<!--// city: '南山区',--> | ||
| 113 | -<!--// zip: 100000--> | ||
| 114 | -<!--// }--> | ||
| 115 | - <!--]--> | ||
| 116 | - <!--}--> | ||
| 117 | - <!--},--> | ||
| 118 | - <!--methods: {--> | ||
| 119 | - <!--change1 (d, l) {--> | ||
| 120 | -<!--// console.log(d)--> | ||
| 121 | -<!--// console.log(l)--> | ||
| 122 | - <!--},--> | ||
| 123 | - <!--change2 (d, l) {--> | ||
| 124 | - <!--console.log(d);--> | ||
| 125 | - <!--console.log(l);--> | ||
| 126 | - <!--},--> | ||
| 127 | - <!--addData () {--> | ||
| 128 | - <!--this.data3.push({--> | ||
| 129 | - <!--name: '周小伟',--> | ||
| 130 | - <!--age: 26,--> | ||
| 131 | - <!--address: '深圳市南山区深南大道',--> | ||
| 132 | - <!--province: '广东',--> | ||
| 133 | - <!--city: '南山区',--> | ||
| 134 | - <!--zip: 100000--> | ||
| 135 | - <!--})--> | ||
| 136 | - <!--}--> | ||
| 137 | - <!--}--> | ||
| 138 | - <!--}--> | ||
| 139 | -<!--</script>--> | ||
| 140 | - | ||
| 141 | <template> | 1 | <template> |
| 142 | <div> | 2 | <div> |
| 143 | - <i-table :data="dtData" :height="400" :columns="dtCols" border highlight-row></i-table> | ||
| 144 | - <Button type="ghost" @click="addData"> add data</Button> | 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> | ||
| 145 | </div> | 12 | </div> |
| 146 | </template> | 13 | </template> |
| 147 | <script> | 14 | <script> |
| 15 | + import test from '../components/test.vue'; | ||
| 148 | export default { | 16 | export default { |
| 149 | - data(){ | ||
| 150 | - return{ | ||
| 151 | - dtData:[], | ||
| 152 | - dtCols:[ | 17 | + data () { |
| 18 | + return { | ||
| 19 | + columns2: [ | ||
| 20 | +// { | ||
| 21 | +// type: 'selection', | ||
| 22 | +// width: 60, | ||
| 23 | +// align: 'center' | ||
| 24 | +// }, | ||
| 153 | { | 25 | { |
| 154 | - type: 'selection', | ||
| 155 | - width: 60, | ||
| 156 | - align: 'center' | ||
| 157 | - }, | ||
| 158 | - { | ||
| 159 | - title: '分类名称', | 26 | + title: '姓名', |
| 160 | key: 'name', | 27 | key: 'name', |
| 161 | - sortable: true | ||
| 162 | - }, | ||
| 163 | - { | ||
| 164 | - title: '操作', | ||
| 165 | - fixed: 'right', | ||
| 166 | - width: 120, | 28 | + width: 100, |
| 29 | +// sortable: true, | ||
| 30 | +// fixed: 'right', | ||
| 167 | render: (h, params) => { | 31 | render: (h, params) => { |
| 168 | return h('div', [ | 32 | return h('div', [ |
| 169 | h('Button', { | 33 | h('Button', { |
| @@ -177,15 +41,102 @@ | @@ -177,15 +41,102 @@ | ||
| 177 | }, '修改') | 41 | }, '修改') |
| 178 | ]); | 42 | ]); |
| 179 | } | 43 | } |
| 180 | - } | 44 | + }, |
| 45 | + { | ||
| 46 | + title: '年龄', | ||
| 47 | + key: 'age', | ||
| 48 | + sortable: true, | ||
| 49 | + width: 100 | ||
| 50 | + }, | ||
| 51 | + { | ||
| 52 | + title: '省份', | ||
| 53 | + key: 'province', | ||
| 54 | + sortable: true, | ||
| 55 | +// fixed: 'right', | ||
| 56 | +// width: 100 | ||
| 57 | + }, | ||
| 58 | +// { | ||
| 59 | +// title: '市区', | ||
| 60 | +// key: 'city', | ||
| 61 | +// width: 100 | ||
| 62 | +// }, | ||
| 63 | +// { | ||
| 64 | +// title: '地址', | ||
| 65 | +// key: 'address', | ||
| 66 | +// width: 200 | ||
| 67 | +// }, | ||
| 68 | +// { | ||
| 69 | +// title: '邮编', | ||
| 70 | +// key: 'zip', | ||
| 71 | +// width: 100 | ||
| 72 | +// }, | ||
| 73 | +// { | ||
| 74 | +// title: '操作', | ||
| 75 | +// key: 'action', | ||
| 76 | +// fixed: 'right', | ||
| 77 | +// width: 120, | ||
| 78 | +// render: (h, params) => { | ||
| 79 | +// return h(test); | ||
| 80 | +// } | ||
| 81 | +// } | ||
| 82 | + ], | ||
| 83 | + data3: [ | ||
| 84 | +// { | ||
| 85 | +// name: '王小明', | ||
| 86 | +// age: 18, | ||
| 87 | +// address: '北京市朝阳区芍药居', | ||
| 88 | +// province: '北京市', | ||
| 89 | +// city: '朝阳区', | ||
| 90 | +// zip: 100000 | ||
| 91 | +// }, | ||
| 92 | +// { | ||
| 93 | +// name: '张小刚', | ||
| 94 | +// age: 25, | ||
| 95 | +// address: '北京市海淀区西二旗', | ||
| 96 | +// province: '北京市', | ||
| 97 | +// city: '海淀区', | ||
| 98 | +// zip: 100000 | ||
| 99 | +// }, | ||
| 100 | +// { | ||
| 101 | +// name: '李小红', | ||
| 102 | +// age: 30, | ||
| 103 | +// address: '上海市浦东新区世纪大道', | ||
| 104 | +// province: '上海市', | ||
| 105 | +// city: '浦东新区', | ||
| 106 | +// zip: 100000 | ||
| 107 | +// }, | ||
| 108 | +// { | ||
| 109 | +// name: '周小伟', | ||
| 110 | +// age: 26, | ||
| 111 | +// address: '深圳市南山区深南大道', | ||
| 112 | +// province: '广东', | ||
| 113 | +// city: '南山区', | ||
| 114 | +// zip: 100000 | ||
| 115 | +// } | ||
| 181 | ] | 116 | ] |
| 182 | } | 117 | } |
| 183 | }, | 118 | }, |
| 184 | methods: { | 119 | methods: { |
| 120 | + change1 (d, l) { | ||
| 121 | +// console.log(d) | ||
| 122 | +// console.log(l) | ||
| 123 | + }, | ||
| 124 | + change2 (d, l) { | ||
| 125 | + console.log(d); | ||
| 126 | + console.log(l); | ||
| 127 | + }, | ||
| 185 | addData () { | 128 | addData () { |
| 186 | - this.dtData.push({ | ||
| 187 | - name: '发送到附件是' | 129 | + this.data3.push({ |
| 130 | + name: '周小伟', | ||
| 131 | + age: 26, | ||
| 132 | + address: '深圳市南山区深南大道', | ||
| 133 | + province: '广东', | ||
| 134 | + city: '南山区', | ||
| 135 | + zip: 100000 | ||
| 188 | }) | 136 | }) |
| 137 | + }, | ||
| 138 | + edit () { | ||
| 139 | + | ||
| 189 | } | 140 | } |
| 190 | } | 141 | } |
| 191 | } | 142 | } |
src/components/table/mixin.js
| @@ -33,6 +33,7 @@ export default { | @@ -33,6 +33,7 @@ export default { | ||
| 33 | const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right'); | 33 | const firstFixedIndex = this.columns.findIndex((col) => col.fixed === 'right'); |
| 34 | if (firstFixedIndex === index) width += this.$parent.scrollBarWidth; | 34 | if (firstFixedIndex === index) width += this.$parent.scrollBarWidth; |
| 35 | } | 35 | } |
| 36 | + if (width === '0') width = ''; | ||
| 36 | return width; | 37 | return width; |
| 37 | } | 38 | } |
| 38 | } | 39 | } |