itable 添加禁用某行选中的功能

This commit is contained in:
leonine 2017-02-20 11:17:47 +08:00
parent 8a0b17498f
commit 0dcc948256
6 changed files with 33 additions and 5 deletions

View file

@ -2,7 +2,7 @@
<div :class="classes"> <div :class="classes">
<template v-if="renderType === 'index'">{{naturalIndex + 1}}</template> <template v-if="renderType === 'index'">{{naturalIndex + 1}}</template>
<template v-if="renderType === 'selection'"> <template v-if="renderType === 'selection'">
<Checkbox :checked="checked" @on-change="toggleSelect"></Checkbox> <Checkbox :checked="checked" @on-change="toggleSelect" :disabled="disabled"></Checkbox>
</template> </template>
<template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template> <template v-if="renderType === 'normal'">{{{ row[column.key] }}}</template>
</div> </div>
@ -19,6 +19,7 @@
naturalIndex: Number, // index of rebuildData naturalIndex: Number, // index of rebuildData
index: Number, // _index of data index: Number, // _index of data
checked: Boolean, checked: Boolean,
disabled:Boolean,
fixed: { fixed: {
type: [Boolean, String], type: [Boolean, String],
default: false default: false

View file

@ -19,7 +19,9 @@
:column="column" :column="column"
:natural-index="index" :natural-index="index"
:index="row._index" :index="row._index"
:checked="rowChecked(row._index)"></Cell> :checked="rowChecked(row._index)"
:disabled="rowDisabled(row._index)"
></Cell>
</td> </td>
</tr> </tr>
</tbody> </tbody>
@ -51,13 +53,17 @@
this.rowClsName(_index), this.rowClsName(_index),
{ {
[`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight, [`${this.prefixCls}-row-highlight`]: this.objData[_index] && this.objData[_index]._isHighlight,
[`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover [`${this.prefixCls}-row-hover`]: this.objData[_index] && this.objData[_index]._isHover,
[`${this.prefixCls}-row-disabled`]: this.objData[_index] && this.objData[_index]._isDisabled
} }
]; ];
}, },
rowChecked (_index) { rowChecked (_index) {
return this.objData[_index] && this.objData[_index]._isChecked; return this.objData[_index] && this.objData[_index]._isChecked;
}, },
rowDisabled(_index){
return this.objData[_index] && this.objData[_index]._isDisabled;
},
rowClsName (_index) { rowClsName (_index) {
return this.$parent.rowClassName(this.objData[_index], _index); return this.$parent.rowClassName(this.objData[_index], _index);
}, },

View file

@ -392,7 +392,12 @@
}, },
selectAll (status) { selectAll (status) {
this.rebuildData.forEach((data) => { this.rebuildData.forEach((data) => {
if(this.objData[data._index]._isDisabled){
this.objData[data._index]._isChecked = false
}else{
this.objData[data._index]._isChecked = status; this.objData[data._index]._isChecked = status;
}
}); });
const selection = this.getSelection(); const selection = this.getSelection();
@ -558,6 +563,12 @@
} else { } else {
newRow._isHighlight = false; newRow._isHighlight = false;
} }
if(newRow._disabled){
newRow._isDisabled = newRow._disabled;
}else{
newRow._isDisabled = false;
}
data[index] = newRow; data[index] = newRow;
}); });
return data; return data;

View file

@ -209,6 +209,14 @@
} }
} }
&-row-disabled,
tr&-row-disabled,
{
td{
background-color: @table-td-disabled-ng;
}
}
&-fixed, &-fixed-right{ &-fixed, &-fixed-right{
position: absolute; position: absolute;
top: 0; top: 0;

View file

@ -43,6 +43,7 @@
@table-td-stripe-bg : #f5f7f9; @table-td-stripe-bg : #f5f7f9;
@table-td-hover-bg : #ebf7ff; @table-td-hover-bg : #ebf7ff;
@table-td-highlight-bg : #ebf7ff; @table-td-highlight-bg : #ebf7ff;
@table-td-disabled-ng : #c3cbd6;
@menu-dark-active-bg : #313540; @menu-dark-active-bg : #313540;
@date-picker-cell-hover-bg : #e1f0fe; @date-picker-cell-hover-bg : #e1f0fe;

View file

@ -66,7 +66,8 @@
name: '李小红', name: '李小红',
age: 30, age: 30,
address: '上海市浦东新区世纪大道', address: '上海市浦东新区世纪大道',
_checked: true _checked: false,
_disabled: true
}, },
{ {
name: '周小伟', name: '周小伟',