Commit 3c38e4f7f1d88e779bb10960184a7d34d0e9ac61
1 parent
87a400d8
update Table cell
update Table cell
Showing
2 changed files
with
41 additions
and
60 deletions
Show diff stats
examples/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Table width="550" :content="self" border :columns="columns2" :data="data3"></Table> | 2 | + <Card> |
| 3 | + <Table border :content="self" :columns="columns7" :data="data6"></Table> | ||
| 4 | + </Card> | ||
| 3 | </template> | 5 | </template> |
| 4 | <script> | 6 | <script> |
| 5 | export default { | 7 | export default { |
| 6 | - name: 'vvv', | ||
| 7 | data () { | 8 | data () { |
| 8 | return { | 9 | return { |
| 9 | self: this, | 10 | self: this, |
| 10 | - columns2: [ | 11 | + columns7: [ |
| 11 | { | 12 | { |
| 12 | title: '姓名', | 13 | title: '姓名', |
| 13 | key: 'name', | 14 | key: 'name', |
| 14 | - width: 100, | ||
| 15 | - fixed: 'left' | 15 | + render (row, column, index) { |
| 16 | + return `<Icon type="person"></Icon> <strong>${row.name}</strong>`; | ||
| 17 | + } | ||
| 16 | }, | 18 | }, |
| 17 | { | 19 | { |
| 18 | title: '年龄', | 20 | title: '年龄', |
| 19 | - key: 'age', | ||
| 20 | - width: 100 | ||
| 21 | - }, | ||
| 22 | - { | ||
| 23 | - title: '省份', | ||
| 24 | - key: 'province', | ||
| 25 | - width: 100 | ||
| 26 | - }, | ||
| 27 | - { | ||
| 28 | - title: '市区', | ||
| 29 | - key: 'city', | ||
| 30 | - width: 100 | 21 | + key: 'age' |
| 31 | }, | 22 | }, |
| 32 | { | 23 | { |
| 33 | title: '地址', | 24 | title: '地址', |
| 34 | - key: 'address', | ||
| 35 | - width: 200 | ||
| 36 | - }, | ||
| 37 | - { | ||
| 38 | - title: '邮编', | ||
| 39 | - key: 'zip', | ||
| 40 | - width: 100 | 25 | + key: 'address' |
| 41 | }, | 26 | }, |
| 42 | { | 27 | { |
| 43 | title: '操作', | 28 | title: '操作', |
| 44 | key: 'action', | 29 | key: 'action', |
| 45 | - fixed: 'right', | ||
| 46 | - width: 120, | ||
| 47 | - render () { | ||
| 48 | - return `<i-button type="text" size="small" @click.native="handleClick">查看</i-button><i-button type="text" size="small">编辑</i-button>`; | 30 | + width: 150, |
| 31 | + align: 'center', | ||
| 32 | + render (row, column, index) { | ||
| 33 | + return `<i-button type="primary" size="small" @click.native="show(${index})">查看</i-button> <i-button type="error" size="small" @click.native="remove(${index})">删除</i-button>`; | ||
| 49 | } | 34 | } |
| 50 | } | 35 | } |
| 51 | ], | 36 | ], |
| 52 | - data3: [ | 37 | + data6: [ |
| 53 | { | 38 | { |
| 54 | name: '王小明', | 39 | name: '王小明', |
| 55 | age: 18, | 40 | age: 18, |
| 56 | - address: '北京市朝阳区芍药居', | ||
| 57 | - province: '北京市', | ||
| 58 | - city: '朝阳区', | ||
| 59 | - zip: 100000 | 41 | + address: '北京市朝阳区芍药居' |
| 60 | }, | 42 | }, |
| 61 | -// { | ||
| 62 | -// name: '张小刚', | ||
| 63 | -// age: 25, | ||
| 64 | -// address: '北京市海淀区西二旗', | ||
| 65 | -// province: '北京市', | ||
| 66 | -// city: '海淀区', | ||
| 67 | -// zip: 100000 | ||
| 68 | -// }, | ||
| 69 | -// { | ||
| 70 | -// name: '李小红', | ||
| 71 | -// age: 30, | ||
| 72 | -// address: '上海市浦东新区世纪大道', | ||
| 73 | -// province: '上海市', | ||
| 74 | -// city: '浦东新区', | ||
| 75 | -// zip: 100000 | ||
| 76 | -// }, | ||
| 77 | -// { | ||
| 78 | -// name: '周小伟', | ||
| 79 | -// age: 26, | ||
| 80 | -// address: '深圳市南山区深南大道', | ||
| 81 | -// province: '广东', | ||
| 82 | -// city: '南山区', | ||
| 83 | -// zip: 100000 | ||
| 84 | -// } | 43 | + { |
| 44 | + name: '张小刚', | ||
| 45 | + age: 25, | ||
| 46 | + address: '北京市海淀区西二旗' | ||
| 47 | + }, | ||
| 48 | + { | ||
| 49 | + name: '李小红', | ||
| 50 | + age: 30, | ||
| 51 | + address: '上海市浦东新区世纪大道' | ||
| 52 | + }, | ||
| 53 | + { | ||
| 54 | + name: '周小伟', | ||
| 55 | + age: 26, | ||
| 56 | + address: '深圳市南山区深南大道' | ||
| 57 | + } | ||
| 85 | ] | 58 | ] |
| 86 | } | 59 | } |
| 87 | }, | 60 | }, |
| 88 | methods: { | 61 | methods: { |
| 89 | - handleClick () { | ||
| 90 | - console.log(123) | 62 | + show (index) { |
| 63 | + console.log(`姓名：${this.data6[index].name}<br>年龄：${this.data6[index].age}<br>地址：${this.data6[index].address}`) | ||
| 64 | + }, | ||
| 65 | + remove (index) { | ||
| 66 | + this.data6.splice(index, 1); | ||
| 91 | } | 67 | } |
| 68 | + }, | ||
| 69 | + mounted () { | ||
| 70 | + setTimeout(() => { | ||
| 71 | +// this.data6.splice(2, 1); | ||
| 72 | + }, 3000) | ||
| 92 | } | 73 | } |
| 93 | } | 74 | } |
| 94 | </script> | 75 | </script> |
src/components/table/cell.vue
| @@ -60,7 +60,7 @@ | @@ -60,7 +60,7 @@ | ||
| 60 | this.$el.innerHTML = ''; | 60 | this.$el.innerHTML = ''; |
| 61 | let methods = {}; | 61 | let methods = {}; |
| 62 | Object.keys($parent).forEach(key => { | 62 | Object.keys($parent).forEach(key => { |
| 63 | - const func = this.$parent.$parent.$parent[`${key}`]; | 63 | + const func = $parent[`${key}`]; |
| 64 | if (typeof(func) === 'function' && func.name === 'boundFn') { | 64 | if (typeof(func) === 'function' && func.name === 'boundFn') { |
| 65 | methods[`${key}`] = func; | 65 | methods[`${key}`] = func; |
| 66 | } | 66 | } |