Commit 8b530b1ce3604becf85dfb5728d457ffb0096861
1 parent
fded311f
fixed #1342
Showing
3 changed files
with
111 additions
and
131 deletions
Show diff stats
examples/components/test.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div>{{ row.name }}</div> | 2 | + <Select v-model="model1" style="width:200px"> |
| 3 | + <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> | ||
| 4 | + </Select> | ||
| 3 | </template> | 5 | </template> |
| 4 | <script> | 6 | <script> |
| 5 | export default { | 7 | export default { |
| 6 | - props: { | ||
| 7 | - row: Object | ||
| 8 | - }, | ||
| 9 | - mounted () { | ||
| 10 | -// console.log(1); | ||
| 11 | - }, | ||
| 12 | - beforeDestroy () { | ||
| 13 | -// console.log(2); | 8 | + data () { |
| 9 | + return { | ||
| 10 | + cityList: [ | ||
| 11 | + { | ||
| 12 | + value: 'beijing', | ||
| 13 | + label: '北京市' | ||
| 14 | + }, | ||
| 15 | + { | ||
| 16 | + value: 'shanghai', | ||
| 17 | + label: '上海市' | ||
| 18 | + }, | ||
| 19 | + { | ||
| 20 | + value: 'shenzhen', | ||
| 21 | + label: '深圳市' | ||
| 22 | + }, | ||
| 23 | + { | ||
| 24 | + value: 'hangzhou', | ||
| 25 | + label: '杭州市' | ||
| 26 | + }, | ||
| 27 | + { | ||
| 28 | + value: 'nanjing', | ||
| 29 | + label: '南京市' | ||
| 30 | + }, | ||
| 31 | + { | ||
| 32 | + value: 'chongqing', | ||
| 33 | + label: '重庆市' | ||
| 34 | + } | ||
| 35 | + ], | ||
| 36 | + model1: '' | ||
| 37 | + } | ||
| 14 | } | 38 | } |
| 15 | } | 39 | } |
| 16 | </script> | 40 | </script> |
| 17 | \ No newline at end of file | 41 | \ No newline at end of file |
examples/routers/table.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div> | ||
| 3 | - <div style="margin: 10px"> | ||
| 4 | - 显示边框 <i-switch v-model="showBorder" style="margin-right: 5px"></i-switch> | ||
| 5 | - 显示斑马纹 <i-switch v-model="showStripe" style="margin-right: 5px"></i-switch> | ||
| 6 | - 显示索引 <i-switch v-model="showIndex" style="margin-right: 5px"></i-switch> | ||
| 7 | - 显示多选框 <i-switch v-model="showCheckbox" style="margin-right: 5px"></i-switch> | ||
| 8 | - 显示表头 <i-switch v-model="showHeader" style="margin-right: 5px"></i-switch> | ||
| 9 | - 表格滚动 <i-switch v-model="fixedHeader" style="margin-right: 5px"></i-switch> | ||
| 10 | - <br> | ||
| 11 | - <br> | ||
| 12 | - 表格尺寸 | ||
| 13 | - <Radio-group v-model="tableSize" type="button"> | ||
| 14 | - <Radio label="large">大</Radio> | ||
| 15 | - <Radio label="default">中</Radio> | ||
| 16 | - <Radio label="small">小</Radio> | ||
| 17 | - </Radio-group> | ||
| 18 | - </div> | ||
| 19 | - <Table :border="showBorder" :stripe="showStripe" :show-header="showHeader" :height="fixedHeader ? 250 : ''" :size="tableSize" :data="tableData3" :columns="tableColumns3"></Table> | ||
| 20 | - </div> | 2 | + <Table width="550" border highlight-row @on-selection-change="change2" @on-current-change="change1" :columns="columns2" :data="data3"></Table> |
| 21 | </template> | 3 | </template> |
| 22 | <script> | 4 | <script> |
| 23 | export default { | 5 | export default { |
| 24 | data () { | 6 | data () { |
| 25 | return { | 7 | return { |
| 26 | - tableData3: [ | 8 | + columns2: [ |
| 27 | { | 9 | { |
| 28 | - name: '王小明', | ||
| 29 | - age: 18, | ||
| 30 | - address: '北京市朝阳区芍药居', | ||
| 31 | - date: '2016-10-03' | 10 | + type: 'selection', |
| 11 | + width: 60, | ||
| 12 | + align: 'center' | ||
| 32 | }, | 13 | }, |
| 33 | { | 14 | { |
| 34 | - name: '张小刚', | ||
| 35 | - age: 24, | ||
| 36 | - address: '北京市海淀区西二旗', | ||
| 37 | - date: '2016-10-01' | 15 | + title: '姓名', |
| 16 | + key: 'name', | ||
| 17 | + width: 100, | ||
| 18 | + fixed: 'left' | ||
| 38 | }, | 19 | }, |
| 39 | { | 20 | { |
| 40 | - name: '李小红', | ||
| 41 | - age: 30, | ||
| 42 | - address: '上海市浦东新区世纪大道', | ||
| 43 | - date: '2016-10-02' | 21 | + title: '年龄', |
| 22 | + key: 'age', | ||
| 23 | + width: 100 | ||
| 44 | }, | 24 | }, |
| 45 | { | 25 | { |
| 46 | - name: '周小伟', | ||
| 47 | - age: 26, | ||
| 48 | - address: '深圳市南山区深南大道', | ||
| 49 | - date: '2016-10-04' | 26 | + title: '省份', |
| 27 | + key: 'province', | ||
| 28 | + width: 100 | ||
| 29 | + }, | ||
| 30 | + { | ||
| 31 | + title: '市区', | ||
| 32 | + key: 'city', | ||
| 33 | + width: 100 | ||
| 34 | + }, | ||
| 35 | + { | ||
| 36 | + title: '地址', | ||
| 37 | + key: 'address', | ||
| 38 | + width: 200 | ||
| 50 | }, | 39 | }, |
| 51 | { | 40 | { |
| 41 | + title: '邮编', | ||
| 42 | + key: 'zip', | ||
| 43 | + width: 100 | ||
| 44 | + }, | ||
| 45 | + { | ||
| 46 | + title: '操作', | ||
| 47 | + key: 'action', | ||
| 48 | + fixed: 'right', | ||
| 49 | + width: 120, | ||
| 50 | + render: (h, params) => { | ||
| 51 | + return h('div', [ | ||
| 52 | + h('Button', { | ||
| 53 | + props: { | ||
| 54 | + type: 'text', | ||
| 55 | + size: 'small' | ||
| 56 | + } | ||
| 57 | + }, '查看'), | ||
| 58 | + h('Button', { | ||
| 59 | + props: { | ||
| 60 | + type: 'text', | ||
| 61 | + size: 'small' | ||
| 62 | + } | ||
| 63 | + }, '编辑') | ||
| 64 | + ]); | ||
| 65 | + } | ||
| 66 | + } | ||
| 67 | + ], | ||
| 68 | + data3: [ | ||
| 69 | + { | ||
| 52 | name: '王小明', | 70 | name: '王小明', |
| 53 | age: 18, | 71 | age: 18, |
| 54 | address: '北京市朝阳区芍药居', | 72 | address: '北京市朝阳区芍药居', |
| 55 | - date: '2016-10-03' | 73 | + province: '北京市', |
| 74 | + city: '朝阳区', | ||
| 75 | + zip: 100000 | ||
| 56 | }, | 76 | }, |
| 57 | { | 77 | { |
| 58 | name: '张小刚', | 78 | name: '张小刚', |
| 59 | - age: 24, | 79 | + age: 25, |
| 60 | address: '北京市海淀区西二旗', | 80 | address: '北京市海淀区西二旗', |
| 61 | - date: '2016-10-01' | 81 | + province: '北京市', |
| 82 | + city: '海淀区', | ||
| 83 | + zip: 100000 | ||
| 62 | }, | 84 | }, |
| 63 | { | 85 | { |
| 64 | name: '李小红', | 86 | name: '李小红', |
| 65 | age: 30, | 87 | age: 30, |
| 66 | address: '上海市浦东新区世纪大道', | 88 | address: '上海市浦东新区世纪大道', |
| 67 | - date: '2016-10-02' | 89 | + province: '上海市', |
| 90 | + city: '浦东新区', | ||
| 91 | + zip: 100000 | ||
| 68 | }, | 92 | }, |
| 69 | { | 93 | { |
| 70 | name: '周小伟', | 94 | name: '周小伟', |
| 71 | age: 26, | 95 | age: 26, |
| 72 | address: '深圳市南山区深南大道', | 96 | address: '深圳市南山区深南大道', |
| 73 | - date: '2016-10-04' | 97 | + province: '广东', |
| 98 | + city: '南山区', | ||
| 99 | + zip: 100000 | ||
| 74 | } | 100 | } |
| 75 | - ], | ||
| 76 | - showBorder: false, | ||
| 77 | - showStripe: false, | ||
| 78 | - showHeader: true, | ||
| 79 | - showIndex: true, | ||
| 80 | - showCheckbox: false, | ||
| 81 | - fixedHeader: false, | ||
| 82 | - tableSize: 'default' | 101 | + ] |
| 83 | } | 102 | } |
| 84 | }, | 103 | }, |
| 85 | - computed: { | ||
| 86 | - tableColumns3 () { | ||
| 87 | - let columns = []; | ||
| 88 | - if (this.showCheckbox) { | ||
| 89 | - columns.push({ | ||
| 90 | - type: 'selection', | ||
| 91 | - width: 60, | ||
| 92 | - align: 'center' | ||
| 93 | - }) | ||
| 94 | - } | ||
| 95 | - if (this.showIndex) { | ||
| 96 | - columns.push({ | ||
| 97 | - type: 'index', | ||
| 98 | - width: 60, | ||
| 99 | - align: 'center' | ||
| 100 | - }) | ||
| 101 | - } | ||
| 102 | - columns.push({ | ||
| 103 | - title: '日期', | ||
| 104 | - key: 'date', | ||
| 105 | - sortable: true | ||
| 106 | - }); | ||
| 107 | - columns.push({ | ||
| 108 | - title: '姓名', | ||
| 109 | - key: 'name' | ||
| 110 | - }); | ||
| 111 | - columns.push({ | ||
| 112 | - title: '年龄', | ||
| 113 | - key: 'age', | ||
| 114 | - sortable: true, | ||
| 115 | - filters: [ | ||
| 116 | - { | ||
| 117 | - label: '大于25岁', | ||
| 118 | - value: 1 | ||
| 119 | - }, | ||
| 120 | - { | ||
| 121 | - label: '小于25岁', | ||
| 122 | - value: 2 | ||
| 123 | - } | ||
| 124 | - ], | ||
| 125 | - filterMultiple: false, | ||
| 126 | - filterMethod (value, row) { | ||
| 127 | - if (value === 1) { | ||
| 128 | - return row.age > 25; | ||
| 129 | - } else if (value === 2) { | ||
| 130 | - return row.age < 25; | ||
| 131 | - } | ||
| 132 | - } | ||
| 133 | - }); | ||
| 134 | - columns.push({ | ||
| 135 | - title: '地址', | ||
| 136 | - key: 'address', | ||
| 137 | - filters: [ | ||
| 138 | - { | ||
| 139 | - label: '北京', | ||
| 140 | - value: '北京' | ||
| 141 | - }, | ||
| 142 | - { | ||
| 143 | - label: '上海', | ||
| 144 | - value: '上海' | ||
| 145 | - }, | ||
| 146 | - { | ||
| 147 | - label: '深圳', | ||
| 148 | - value: '深圳' | ||
| 149 | - } | ||
| 150 | - ], | ||
| 151 | - filterMethod (value, row) { | ||
| 152 | - return row.address.indexOf(value) > -1; | ||
| 153 | - } | ||
| 154 | - }); | ||
| 155 | - return columns; | 104 | + methods: { |
| 105 | + change1 (d, l) { | ||
| 106 | +// console.log(d) | ||
| 107 | +// console.log(l) | ||
| 108 | + }, | ||
| 109 | + change2 (d, l) { | ||
| 110 | + console.log(d); | ||
| 111 | + console.log(l); | ||
| 156 | } | 112 | } |
| 157 | } | 113 | } |
| 158 | } | 114 | } |
| 159 | -</script> | ||
| 160 | \ No newline at end of file | 115 | \ No newline at end of file |
| 116 | +</script> |
src/components/table/table-body.vue
| @@ -11,7 +11,7 @@ | @@ -11,7 +11,7 @@ | ||
| 11 | :prefix-cls="prefixCls" | 11 | :prefix-cls="prefixCls" |
| 12 | @mouseenter.native.stop="handleMouseIn(row._index)" | 12 | @mouseenter.native.stop="handleMouseIn(row._index)" |
| 13 | @mouseleave.native.stop="handleMouseOut(row._index)" | 13 | @mouseleave.native.stop="handleMouseOut(row._index)" |
| 14 | - @click.native.stop="clickCurrentRow(row._index)" | 14 | + @click.native="clickCurrentRow(row._index)" |
| 15 | @dblclick.native.stop="dblclickCurrentRow(row._index)"> | 15 | @dblclick.native.stop="dblclickCurrentRow(row._index)"> |
| 16 | <td v-for="column in columns" :class="alignCls(column, row)"> | 16 | <td v-for="column in columns" :class="alignCls(column, row)"> |
| 17 | <Cell | 17 | <Cell |