Commit 0dcc948256e70b657f0e01fa3491f84b32b88d41
1 parent
8a0b1749
itable 添加禁用某行选中的功能
Showing
6 changed files
with
33 additions
and
5 deletions
Show diff stats
src/components/table/cell.vue
| @@ -2,7 +2,7 @@ | @@ -2,7 +2,7 @@ | ||
| 2 | <div :class="classes"> | 2 | <div :class="classes"> |
| 3 | <template v-if="renderType === 'index'">{{naturalIndex + 1}}</template> | 3 | <template v-if="renderType === 'index'">{{naturalIndex + 1}}</template> |
| 4 | <template v-if="renderType === 'selection'"> | 4 | <template v-if="renderType === 'selection'"> |
| 5 | - <Checkbox :checked="checked" @on-change="toggleSelect"></Checkbox> | 5 | + <Checkbox :checked="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox> |
| 6 | </template> | 6 | </template> |
| 7 | <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template> | 7 | <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template> |
| 8 | </div> | 8 | </div> |
| @@ -19,6 +19,7 @@ | @@ -19,6 +19,7 @@ | ||
| 19 | naturalIndex: Number, // index of rebuildData | 19 | naturalIndex: Number, // index of rebuildData |
| 20 | index: Number, // _index of data | 20 | index: Number, // _index of data |
| 21 | checked: Boolean, | 21 | checked: Boolean, |
| 22 | + disabled:Boolean, | ||
| 22 | fixed: { | 23 | fixed: { |
| 23 | type: [Boolean, String], | 24 | type: [Boolean, String], |
| 24 | default: false | 25 | default: false |
src/components/table/table-body.vue
| @@ -19,7 +19,9 @@ | @@ -19,7 +19,9 @@ | ||
| 19 | :column="column" | 19 | :column="column" |
| 20 | :natural-index="index" | 20 | :natural-index="index" |
| 21 | :index="row._index" | 21 | :index="row._index" |
| 22 | - :checked="rowChecked(row._index)"></Cell> | 22 | + :checked="rowChecked(row._index)" |
| 23 | + :disabled="rowDisabled(row._index)" | ||
| 24 | + ></Cell> | ||
| 23 | </td> | 25 | </td> |
| 24 | </tr> | 26 | </tr> |
| 25 | </tbody> | 27 | </tbody> |
| @@ -51,13 +53,17 @@ | @@ -51,13 +53,17 @@ | ||
| 51 | this.rowClsName(_index), | 53 | this.rowClsName(_index), |
| 52 | { | 54 | { |
| 53 | [`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight, | 55 | [`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight, |
| 54 | - [`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover | 56 | + [`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover, |
| 57 | + [`${this.prefixCls}-row-disabled`]: this.objData[_index] && this.objData[_index]._isDisabled | ||
| 55 | } | 58 | } |
| 56 | ]; | 59 | ]; |
| 57 | }, | 60 | }, |
| 58 | rowChecked (_index) { | 61 | rowChecked (_index) { |
| 59 | return this.objData[_index] && this.objData[_index]._isChecked; | 62 | return this.objData[_index] && this.objData[_index]._isChecked; |
| 60 | }, | 63 | }, |
| 64 | + rowDisabled(_index){ | ||
| 65 | + return this.objData[_index] && this.objData[_index]._isDisabled; | ||
| 66 | + }, | ||
| 61 | rowClsName (_index) { | 67 | rowClsName (_index) { |
| 62 | return this.$parent.rowClassName(this.objData[_index], _index); | 68 | return this.$parent.rowClassName(this.objData[_index], _index); |
| 63 | }, | 69 | }, |
src/components/table/table.vue
| @@ -392,7 +392,12 @@ | @@ -392,7 +392,12 @@ | ||
| 392 | }, | 392 | }, |
| 393 | selectAll (status) { | 393 | selectAll (status) { |
| 394 | this.rebuildData.forEach((data) => { | 394 | this.rebuildData.forEach((data) => { |
| 395 | - this.objData[data._index]._isChecked = status; | 395 | + if(this.objData[data._index]._isDisabled){ |
| 396 | + this.objData[data._index]._isChecked = false | ||
| 397 | + }else{ | ||
| 398 | + this.objData[data._index]._isChecked = status; | ||
| 399 | + } | ||
| 400 | + | ||
| 396 | }); | 401 | }); |
| 397 | 402 | ||
| 398 | const selection = this.getSelection(); | 403 | const selection = this.getSelection(); |
| @@ -558,6 +563,12 @@ | @@ -558,6 +563,12 @@ | ||
| 558 | } else { | 563 | } else { |
| 559 | newRow._isHighlight = false; | 564 | newRow._isHighlight = false; |
| 560 | } | 565 | } |
| 566 | + | ||
| 567 | + if(newRow._disabled){ | ||
| 568 | + newRow._isDisabled = newRow._disabled; | ||
| 569 | + }else{ | ||
| 570 | + newRow._isDisabled = false; | ||
| 571 | + } | ||
| 561 | data[index] = newRow; | 572 | data[index] = newRow; |
| 562 | }); | 573 | }); |
| 563 | return data; | 574 | return data; |
src/styles/components/table.less
| @@ -209,6 +209,14 @@ | @@ -209,6 +209,14 @@ | ||
| 209 | } | 209 | } |
| 210 | } | 210 | } |
| 211 | 211 | ||
| 212 | + &-row-disabled, | ||
| 213 | + tr&-row-disabled, | ||
| 214 | + { | ||
| 215 | + td{ | ||
| 216 | + background-color: @table-td-disabled-ng; | ||
| 217 | + } | ||
| 218 | + } | ||
| 219 | + | ||
| 212 | &-fixed, &-fixed-right{ | 220 | &-fixed, &-fixed-right{ |
| 213 | position: absolute; | 221 | position: absolute; |
| 214 | top: 0; | 222 | top: 0; |
src/styles/custom.less
| @@ -43,6 +43,7 @@ | @@ -43,6 +43,7 @@ | ||
| 43 | @table-td-stripe-bg : #f5f7f9; | 43 | @table-td-stripe-bg : #f5f7f9; |
| 44 | @table-td-hover-bg : #ebf7ff; | 44 | @table-td-hover-bg : #ebf7ff; |
| 45 | @table-td-highlight-bg : #ebf7ff; | 45 | @table-td-highlight-bg : #ebf7ff; |
| 46 | +@table-td-disabled-ng : #c3cbd6; | ||
| 46 | @menu-dark-active-bg : #313540; | 47 | @menu-dark-active-bg : #313540; |
| 47 | @date-picker-cell-hover-bg : #e1f0fe; | 48 | @date-picker-cell-hover-bg : #e1f0fe; |
| 48 | 49 |
test/routers/table.vue