Commit f9f1865ca503097bf93bc2b88214b815c48472b6
1 parent
1b7aefea
Table columns add className
Table columns add className
Showing
6 changed files
with
72 additions
and
393 deletions
Show diff stats
src/components/table/mixin.js
| 1 | export default { | 1 | export default { |
| 2 | methods: { | 2 | methods: { |
| 3 | - alignCls (column) { | 3 | + alignCls (column, type) { |
| 4 | return [ | 4 | return [ |
| 5 | { | 5 | { |
| 6 | + [`${column.className}`]: column.className && type === 'body', | ||
| 6 | [`${this.prefixCls}-column-${column.align}`]: column.align, | 7 | [`${this.prefixCls}-column-${column.align}`]: column.align, |
| 7 | [`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')) | 8 | [`${this.prefixCls}-hidden`]: (this.fixed === 'left' && column.fixed !== 'left') || (this.fixed === 'right' && column.fixed !== 'right') || (!this.fixed && column.fixed && (column.fixed === 'left' || column.fixed === 'right')) |
| 8 | } | 9 | } |
src/components/table/table-body.vue
| @@ -11,7 +11,7 @@ | @@ -11,7 +11,7 @@ | ||
| 11 | @mouseleave.stop="handleMouseOut(row._index)" | 11 | @mouseleave.stop="handleMouseOut(row._index)" |
| 12 | @click.stop="clickCurrentRow(row._index)" | 12 | @click.stop="clickCurrentRow(row._index)" |
| 13 | @dblclick.stop="dblclickCurrentRow(row._index)"> | 13 | @dblclick.stop="dblclickCurrentRow(row._index)"> |
| 14 | - <td v-for="column in columns" :class="alignCls(column)"> | 14 | + <td v-for="column in columns" :class="alignCls(column, 'body')"> |
| 15 | <Cell | 15 | <Cell |
| 16 | :fixed="fixed" | 16 | :fixed="fixed" |
| 17 | :prefix-cls="prefixCls" | 17 | :prefix-cls="prefixCls" |
src/components/table/table-head.vue
| @@ -5,7 +5,7 @@ | @@ -5,7 +5,7 @@ | ||
| 5 | </colgroup> | 5 | </colgroup> |
| 6 | <thead> | 6 | <thead> |
| 7 | <tr> | 7 | <tr> |
| 8 | - <th v-for="(index, column) in columns" :class="alignCls(column)"> | 8 | + <th v-for="(index, column) in columns" :class="alignCls(column, 'head')"> |
| 9 | <div :class="cellClasses(column)"> | 9 | <div :class="cellClasses(column)"> |
| 10 | <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template> | 10 | <template v-if="column.type === 'selection'"><Checkbox :checked="isSelectAll" @on-change="selectAll"></Checkbox></template> |
| 11 | <template v-else> | 11 | <template v-else> |
test/routers/cascader.vue
| 1 | <template> | 1 | <template> |
| 2 | - <Cascader :data="data" change-on-select></Cascader> | 2 | + <div v-for="item in list"> |
| 3 | + <Cascader :data="data" change-on-select :render-format="format"></Cascader> | ||
| 4 | + </div> | ||
| 5 | + <i-button @click="add">add</i-button> | ||
| 6 | + <i-button @click="remove">remove</i-button> | ||
| 3 | </template> | 7 | </template> |
| 4 | <script> | 8 | <script> |
| 5 | export default { | 9 | export default { |
| 6 | data () { | 10 | data () { |
| 7 | return { | 11 | return { |
| 12 | + list: [ | ||
| 13 | + { | ||
| 14 | + a: 1 | ||
| 15 | + } | ||
| 16 | + ], | ||
| 8 | data: [{ | 17 | data: [{ |
| 9 | value: 'beijing', | 18 | value: 'beijing', |
| 10 | label: '北京', | 19 | label: '北京', |
| @@ -32,7 +41,7 @@ | @@ -32,7 +41,7 @@ | ||
| 32 | children: [ | 41 | children: [ |
| 33 | { | 42 | { |
| 34 | value: 'fuzimiao', | 43 | value: 'fuzimiao', |
| 35 | - label: '夫子庙', | 44 | + label: '夫子庙' |
| 36 | } | 45 | } |
| 37 | ] | 46 | ] |
| 38 | }, | 47 | }, |
| @@ -42,17 +51,30 @@ | @@ -42,17 +51,30 @@ | ||
| 42 | children: [ | 51 | children: [ |
| 43 | { | 52 | { |
| 44 | value: 'zhuozhengyuan', | 53 | value: 'zhuozhengyuan', |
| 45 | - label: '拙政园', | 54 | + label: '拙政园' |
| 46 | }, | 55 | }, |
| 47 | { | 56 | { |
| 48 | value: 'shizilin', | 57 | value: 'shizilin', |
| 49 | - label: '狮子林', | 58 | + label: '狮子林' |
| 50 | } | 59 | } |
| 51 | ] | 60 | ] |
| 52 | } | 61 | } |
| 53 | - ], | 62 | + ] |
| 54 | }] | 63 | }] |
| 55 | } | 64 | } |
| 65 | + }, | ||
| 66 | + methods: { | ||
| 67 | + add () { | ||
| 68 | + this.list.push({ | ||
| 69 | + a: 2 | ||
| 70 | + }) | ||
| 71 | + }, | ||
| 72 | + remove () { | ||
| 73 | + this.list.splice(0, 1); | ||
| 74 | + }, | ||
| 75 | + format (labels) { | ||
| 76 | + return labels.join(' - '); | ||
| 77 | + } | ||
| 56 | } | 78 | } |
| 57 | } | 79 | } |
| 58 | </script> | 80 | </script> |
test/routers/more.vue
| @@ -4,10 +4,13 @@ | @@ -4,10 +4,13 @@ | ||
| 4 | } | 4 | } |
| 5 | </style> | 5 | </style> |
| 6 | <template> | 6 | <template> |
| 7 | - <row> | ||
| 8 | - <i-col span="0">123</i-col> | ||
| 9 | - <i-col span="24">24</i-col> | ||
| 10 | - </row> | 7 | + <Tabs active-key="key1"> |
| 8 | + <Tab-pane label="标签一" key="key1"> | ||
| 9 | + <Date-picker type="date" placeholder="选择日期" style="width: 200px"></Date-picker> | ||
| 10 | + </Tab-pane> | ||
| 11 | + <Tab-pane label="标签二" key="key2">标签二的内容</Tab-pane> | ||
| 12 | + <Tab-pane label="标签三" key="key3">标签三的内容</Tab-pane> | ||
| 13 | + </Tabs> | ||
| 11 | </template> | 14 | </template> |
| 12 | <script> | 15 | <script> |
| 13 | export default { | 16 | export default { |
test/routers/table.vue
| 1 | +<style> | ||
| 2 | + /*.ivu-table .demo-table-info-row td{*/ | ||
| 3 | + /*background-color: #2db7f5;*/ | ||
| 4 | + /*color: #fff;*/ | ||
| 5 | + /*}*/ | ||
| 6 | + /*.ivu-table .demo-table-error-row td{*/ | ||
| 7 | + /*background-color: #ff6600;*/ | ||
| 8 | + /*color: #fff;*/ | ||
| 9 | + /*}*/ | ||
| 10 | + .ivu-table .table-age-col{ | ||
| 11 | + background: #ff6600; | ||
| 12 | + } | ||
| 13 | + .ivu-table .table-name-col{ | ||
| 14 | + background: #2db7f5; | ||
| 15 | + } | ||
| 16 | + .ivu-table .table-address-col{ | ||
| 17 | + background: #187; | ||
| 18 | + } | ||
| 19 | +</style> | ||
| 1 | <template> | 20 | <template> |
| 2 | - <i-table border :columns="columns1" :data="data1"></i-table> | ||
| 3 | - <!--<i-table border height="200" :columns="columns1" :data="data2"></i-table>--> | ||
| 4 | - <!--<i-table width="550" height="200" border :columns="columns2" :data="data4"></i-table>--> | ||
| 5 | - <!--<i-button @click="changeFilter">改变filter</i-button>--> | ||
| 6 | - <!--<span v-if="currentRow !== null">Current Row: {{currentRow.name}}</span>--> | ||
| 7 | - <!--<Switch size="small" @on-change="switchCellEllipsis"></Switch> Ellipsis--> | ||
| 8 | - <!--<i-table--> | ||
| 9 | - <!--border--> | ||
| 10 | - <!--:columns="columns6"--> | ||
| 11 | - <!--width="500"--> | ||
| 12 | - <!--:data="[]"--> | ||
| 13 | - <!--:highlight-row="true"--> | ||
| 14 | - <!--@on-current-change="onCurrentChange"--> | ||
| 15 | - <!--@on-dblclick="onDblclick">--> | ||
| 16 | - <!--</i-table>--> | ||
| 17 | - | ||
| 18 | - <!--<br/>--> | ||
| 19 | - | ||
| 20 | - <!--<i-table--> | ||
| 21 | - <!--border--> | ||
| 22 | - <!--:columns="columns7"--> | ||
| 23 | - <!--:data="[]"--> | ||
| 24 | - <!--no-data-text="No Data"--> | ||
| 25 | - <!--:highlight-row="true"--> | ||
| 26 | - <!--@on-current-change="onCurrentChange"--> | ||
| 27 | - <!--@on-dblclick="onDblclick">--> | ||
| 28 | - <!--</i-table>--> | ||
| 29 | - | ||
| 30 | - <!--<br/>--> | ||
| 31 | - | ||
| 32 | - <!--<i-table--> | ||
| 33 | - <!--border--> | ||
| 34 | - <!--:columns="columns7"--> | ||
| 35 | - <!--:data="[]"--> | ||
| 36 | - <!--size="small"--> | ||
| 37 | - <!--:highlight-row="true"--> | ||
| 38 | - <!--@on-current-change="onCurrentChange"--> | ||
| 39 | - <!--@on-dblclick="onDblclick">--> | ||
| 40 | - <!--</i-table>--> | ||
| 41 | - | ||
| 42 | - <!--<br/>--> | ||
| 43 | - | ||
| 44 | - <!--<i-table--> | ||
| 45 | - <!--border--> | ||
| 46 | - <!--:columns="columns7"--> | ||
| 47 | - <!--:data="[]"--> | ||
| 48 | - <!--size="large"--> | ||
| 49 | - <!--:highlight-row="true"--> | ||
| 50 | - <!--@on-current-change="onCurrentChange"--> | ||
| 51 | - <!--@on-dblclick="onDblclick">--> | ||
| 52 | - <!--</i-table>--> | ||
| 53 | - | ||
| 54 | - <!--<br/>--> | ||
| 55 | - | ||
| 56 | - <!--<i-table--> | ||
| 57 | - <!--border--> | ||
| 58 | - <!--:columns="columns7"--> | ||
| 59 | - <!--:data="data5"--> | ||
| 60 | - <!--:highlight-row="true"--> | ||
| 61 | - <!--@on-current-change="onCurrentChange"--> | ||
| 62 | - <!--@on-dblclick="onDblclick">--> | ||
| 63 | - <!--</i-table>--> | ||
| 64 | - | ||
| 65 | - <!--<br/>--> | ||
| 66 | - | ||
| 67 | - <!--<i-table--> | ||
| 68 | - <!--border--> | ||
| 69 | - <!--:columns="columns6"--> | ||
| 70 | - <!--width="500"--> | ||
| 71 | - <!--:data="data5"--> | ||
| 72 | - <!--:highlight-row="true"--> | ||
| 73 | - <!--@on-current-change="onCurrentChange"--> | ||
| 74 | - <!--@on-dblclick="onDblclick">--> | ||
| 75 | - <!--</i-table>--> | 21 | + <i-table :row-class-name="rowClassName" :columns="columns1" :data="data1"></i-table> |
| 76 | </template> | 22 | </template> |
| 77 | <script> | 23 | <script> |
| 78 | export default { | 24 | export default { |
| 79 | data () { | 25 | data () { |
| 80 | return { | 26 | return { |
| 81 | - columns2: [ | 27 | + columns1: [ |
| 82 | { | 28 | { |
| 83 | title: '姓名', | 29 | title: '姓名', |
| 84 | key: 'name', | 30 | key: 'name', |
| 85 | - width: 100, | ||
| 86 | - fixed: 'left' | 31 | + fixed: 'right', |
| 32 | + className: 'table-name-col' | ||
| 87 | }, | 33 | }, |
| 88 | { | 34 | { |
| 89 | title: '年龄', | 35 | title: '年龄', |
| 90 | key: 'age', | 36 | key: 'age', |
| 91 | - width: 100 | ||
| 92 | - }, | ||
| 93 | - { | ||
| 94 | - title: '省份', | ||
| 95 | - key: 'province', | ||
| 96 | - width: 100 | ||
| 97 | - }, | ||
| 98 | - { | ||
| 99 | - title: '市区', | ||
| 100 | - key: 'city', | ||
| 101 | - width: 100 | ||
| 102 | - }, | ||
| 103 | - { | ||
| 104 | - title: '地址', | ||
| 105 | - key: 'address', | ||
| 106 | fixed: 'right', | 37 | fixed: 'right', |
| 107 | - width: 200 | ||
| 108 | - }, | ||
| 109 | - { | ||
| 110 | - title: '邮编', | ||
| 111 | - key: 'zip', | ||
| 112 | - width: 100 | ||
| 113 | - }, | ||
| 114 | - { | ||
| 115 | - title: '操作', | ||
| 116 | - key: 'action', | ||
| 117 | -// fixed: 'right', | ||
| 118 | - width: 120, | ||
| 119 | - render () { | ||
| 120 | - return `<i-button type="text" size="small">查看</i-button><i-button type="text" size="small">编辑</i-button>`; | ||
| 121 | - } | ||
| 122 | - } | ||
| 123 | - ], | ||
| 124 | - data4: [ | ||
| 125 | - { | ||
| 126 | - name: '王小明', | ||
| 127 | - age: 18, | ||
| 128 | - address: '北京市朝阳区芍药居', | ||
| 129 | - province: '北京市', | ||
| 130 | - city: '朝阳区', | ||
| 131 | - zip: 100000 | ||
| 132 | - }, | ||
| 133 | - { | ||
| 134 | - name: '张小刚', | ||
| 135 | - age: 25, | ||
| 136 | - address: '北京市海淀区西二旗', | ||
| 137 | - province: '北京市', | ||
| 138 | - city: '海淀区', | ||
| 139 | - zip: 100000 | ||
| 140 | - }, | ||
| 141 | - { | ||
| 142 | - name: '李小红', | ||
| 143 | - age: 30, | ||
| 144 | - address: '上海市浦东新区世纪大道', | ||
| 145 | - province: '上海市', | ||
| 146 | - city: '浦东新区', | ||
| 147 | - zip: 100000 | ||
| 148 | - }, | ||
| 149 | - { | ||
| 150 | - name: '周小伟', | ||
| 151 | - age: 26, | ||
| 152 | - address: '深圳市南山区深南大道', | ||
| 153 | - province: '广东', | ||
| 154 | - city: '南山区', | ||
| 155 | - zip: 100000 | ||
| 156 | - }, | ||
| 157 | - { | ||
| 158 | - name: '王小明', | ||
| 159 | - age: 18, | ||
| 160 | - address: '北京市朝阳区芍药居', | ||
| 161 | - province: '北京市', | ||
| 162 | - city: '朝阳区', | ||
| 163 | - zip: 100000 | ||
| 164 | - }, | ||
| 165 | - { | ||
| 166 | - name: '张小刚', | ||
| 167 | - age: 25, | ||
| 168 | - address: '北京市海淀区西二旗', | ||
| 169 | - province: '北京市', | ||
| 170 | - city: '海淀区', | ||
| 171 | - zip: 100000 | ||
| 172 | - }, | ||
| 173 | - { | ||
| 174 | - name: '李小红', | ||
| 175 | - age: 30, | ||
| 176 | - address: '上海市浦东新区世纪大道', | ||
| 177 | - province: '上海市', | ||
| 178 | - city: '浦东新区', | ||
| 179 | - zip: 100000 | ||
| 180 | - }, | ||
| 181 | - { | ||
| 182 | - name: '周小伟', | ||
| 183 | - age: 26, | ||
| 184 | - address: '深圳市南山区深南大道', | ||
| 185 | - province: '广东', | ||
| 186 | - city: '南山区', | ||
| 187 | - zip: 100000 | ||
| 188 | - } | ||
| 189 | - ], | ||
| 190 | - columns1: [ | ||
| 191 | - { | ||
| 192 | - title: '姓名', | ||
| 193 | - key: 'name' | ||
| 194 | - }, | ||
| 195 | - { | ||
| 196 | - title: '年龄', | ||
| 197 | - key: 'age' | 38 | + className: 'table-age-col' |
| 198 | }, | 39 | }, |
| 199 | { | 40 | { |
| 200 | title: '地址', | 41 | title: '地址', |
| 201 | - key: 'address' | 42 | + key: 'address', |
| 43 | + className: 'table-address-col' | ||
| 202 | } | 44 | } |
| 203 | ], | 45 | ], |
| 204 | data1: [ | 46 | data1: [ |
| @@ -222,206 +64,17 @@ | @@ -222,206 +64,17 @@ | ||
| 222 | age: 26, | 64 | age: 26, |
| 223 | address: '深圳市南山区深南大道' | 65 | address: '深圳市南山区深南大道' |
| 224 | } | 66 | } |
| 225 | - ], | ||
| 226 | - data2: [ | ||
| 227 | - { | ||
| 228 | - name: '王小明', | ||
| 229 | - age: 18, | ||
| 230 | - address: '北京市朝阳区芍药居' | ||
| 231 | - }, | ||
| 232 | - { | ||
| 233 | - name: '张小刚', | ||
| 234 | - age: 25, | ||
| 235 | - address: '北京市海淀区西二旗' | ||
| 236 | - }, | ||
| 237 | - { | ||
| 238 | - name: '李小红', | ||
| 239 | - age: 30, | ||
| 240 | - address: '上海市浦东新区世纪大道' | ||
| 241 | - }, | ||
| 242 | - { | ||
| 243 | - name: '周小伟', | ||
| 244 | - age: 26, | ||
| 245 | - address: '深圳市南山区深南大道' | ||
| 246 | - }, | ||
| 247 | - { | ||
| 248 | - name: '王小明', | ||
| 249 | - age: 18, | ||
| 250 | - address: '北京市朝阳区芍药居' | ||
| 251 | - }, | ||
| 252 | - { | ||
| 253 | - name: '张小刚', | ||
| 254 | - age: 25, | ||
| 255 | - address: '北京市海淀区西二旗' | ||
| 256 | - }, | ||
| 257 | - { | ||
| 258 | - name: '李小红', | ||
| 259 | - age: 30, | ||
| 260 | - address: '上海市浦东新区世纪大道' | ||
| 261 | - }, | ||
| 262 | - { | ||
| 263 | - name: '周小伟', | ||
| 264 | - age: 26, | ||
| 265 | - address: '深圳市南山区深南大道' | ||
| 266 | - } | ||
| 267 | - ], | ||
| 268 | - columns6: [ | ||
| 269 | - { | ||
| 270 | - type: 'selection', | ||
| 271 | - width: 60, | ||
| 272 | - align: 'center', | ||
| 273 | - width: 100 | ||
| 274 | - }, | ||
| 275 | - { | ||
| 276 | - title: '日期', | ||
| 277 | - key: 'date', | ||
| 278 | - fixed: 'left', | ||
| 279 | - width: 100 | ||
| 280 | - }, | ||
| 281 | - { | ||
| 282 | - title: '姓名', | ||
| 283 | - key: 'name', | ||
| 284 | - width: 100 | ||
| 285 | - }, | ||
| 286 | - { | ||
| 287 | - title: '年龄', | ||
| 288 | - key: 'age', | ||
| 289 | - width: 100, | ||
| 290 | - filters: [ | ||
| 291 | - { | ||
| 292 | - label: '大于25岁', | ||
| 293 | - value: 1 | ||
| 294 | - }, | ||
| 295 | - { | ||
| 296 | - label: '小于25岁', | ||
| 297 | - value: 2 | ||
| 298 | - } | ||
| 299 | - ], | ||
| 300 | - filterMultiple: false, | ||
| 301 | - filterMethod (value, row) { | ||
| 302 | - if (value === 1) { | ||
| 303 | - return row.age > 25; | ||
| 304 | - } else if (value === 2) { | ||
| 305 | - return row.age < 25; | ||
| 306 | - } | ||
| 307 | - } | ||
| 308 | - }, | ||
| 309 | - { | ||
| 310 | - title: '地址', | ||
| 311 | - key: 'address', | ||
| 312 | - width: 100, | ||
| 313 | - filters: [ | ||
| 314 | - { | ||
| 315 | - label: '北京', | ||
| 316 | - value: '北京' | ||
| 317 | - }, | ||
| 318 | - { | ||
| 319 | - label: '上海', | ||
| 320 | - value: '上海' | ||
| 321 | - }, | ||
| 322 | - { | ||
| 323 | - label: '深圳', | ||
| 324 | - value: '深圳' | ||
| 325 | - } | ||
| 326 | - ], | ||
| 327 | - filterMethod (value, row) { | ||
| 328 | - return row.address.indexOf(value) > -1; | ||
| 329 | - } | ||
| 330 | - }, | ||
| 331 | - { | ||
| 332 | - title: '长文本', | ||
| 333 | - key: 'longText', | ||
| 334 | - width: 100, | ||
| 335 | - ellipsis: false | ||
| 336 | - } | ||
| 337 | - ], | ||
| 338 | - columns7: [ | ||
| 339 | - { | ||
| 340 | - type: 'selection', | ||
| 341 | - width: 60, | ||
| 342 | - align: 'center' | ||
| 343 | - }, | ||
| 344 | - { | ||
| 345 | - title: '日期', | ||
| 346 | - key: 'date' | ||
| 347 | - }, | ||
| 348 | - { | ||
| 349 | - title: '姓名', | ||
| 350 | - key: 'name' | ||
| 351 | - }, | ||
| 352 | - { | ||
| 353 | - title: '地址', | ||
| 354 | - key: 'address', | ||
| 355 | - filters: [ | ||
| 356 | - { | ||
| 357 | - label: '北京', | ||
| 358 | - value: '北京' | ||
| 359 | - }, | ||
| 360 | - { | ||
| 361 | - label: '上海', | ||
| 362 | - value: '上海' | ||
| 363 | - }, | ||
| 364 | - { | ||
| 365 | - label: '深圳', | ||
| 366 | - value: '深圳' | ||
| 367 | - } | ||
| 368 | - ], | ||
| 369 | - filterMethod (value, row) { | ||
| 370 | - return row.address.indexOf(value) > -1; | ||
| 371 | - } | ||
| 372 | - }, | ||
| 373 | - { | ||
| 374 | - title: '长文本', | ||
| 375 | - key: 'longText', | ||
| 376 | - ellipsis: false | ||
| 377 | - } | ||
| 378 | - ], | ||
| 379 | - data5: [ | ||
| 380 | - { | ||
| 381 | - name: '王小明', | ||
| 382 | - age: 18, | ||
| 383 | - address: '北京市朝阳区芍药居', | ||
| 384 | - date: '2016-10-03', | ||
| 385 | - longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' | ||
| 386 | - }, | ||
| 387 | - { | ||
| 388 | - name: '张小刚', | ||
| 389 | - age: 25, | ||
| 390 | - address: '北京市海淀区西二旗', | ||
| 391 | - date: '2016-10-01', | ||
| 392 | - longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' | ||
| 393 | - }, | ||
| 394 | - { | ||
| 395 | - name: '李小红', | ||
| 396 | - age: 30, | ||
| 397 | - address: '上海市浦东新区世纪大道', | ||
| 398 | - date: '2016-10-02', | ||
| 399 | - longText: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' | ||
| 400 | - } | ||
| 401 | - ], | ||
| 402 | - currentRow: null | 67 | + ] |
| 403 | } | 68 | } |
| 404 | }, | 69 | }, |
| 405 | methods: { | 70 | methods: { |
| 406 | - changeFilter () { | ||
| 407 | - this.columns6[2].filters = [ | ||
| 408 | - { | ||
| 409 | - label: '小于25岁', | ||
| 410 | - value: 2 | ||
| 411 | - } | ||
| 412 | - ] | ||
| 413 | - }, | ||
| 414 | - switchCellEllipsis (status) { | ||
| 415 | - this.columns6[5].ellipsis = status | ||
| 416 | - }, | ||
| 417 | - onClick (data) { | ||
| 418 | - window.alert('Click ' + data.name) | ||
| 419 | - }, | ||
| 420 | - onCurrentChange (data) { | ||
| 421 | - this.currentRow = data | ||
| 422 | - }, | ||
| 423 | - onDblclick (data) { | ||
| 424 | - window.alert('Double Click ' + data.name) | 71 | + rowClassName (row, index) { |
| 72 | + if (index === 1) { | ||
| 73 | + return 'demo-table-info-row'; | ||
| 74 | + } else if (index === 3) { | ||
| 75 | + return 'demo-table-error-row'; | ||
| 76 | + } | ||
| 77 | + return ''; | ||
| 425 | } | 78 | } |
| 426 | } | 79 | } |
| 427 | } | 80 | } |