itable 添加禁用某行选中的功能
This commit is contained in:
parent
8a0b17498f
commit
0dcc948256
6 changed files with 33 additions and 5 deletions
|
@ -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
|
||||||
|
|
|
@ -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);
|
||||||
},
|
},
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
|
@ -66,7 +66,8 @@
|
||||||
name: '李小红',
|
name: '李小红',
|
||||||
age: 30,
|
age: 30,
|
||||||
address: '上海市浦东新区世纪大道',
|
address: '上海市浦东新区世纪大道',
|
||||||
_checked: true
|
_checked: false,
|
||||||
|
_disabled: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '周小伟',
|
name: '周小伟',
|
||||||
|
|
Loading…
Add table
Reference in a new issue