mirror of https://github.com/ElemeFE/element
commit
cb68b3d48f
|
@ -41,22 +41,26 @@
|
||||||
### 多个勾选框,绑定到同一个数组
|
### 多个勾选框,绑定到同一个数组
|
||||||
|
|
||||||
<div class="demo-box demo-checkbox">
|
<div class="demo-box demo-checkbox">
|
||||||
<el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox>
|
<el-checkbox-group v-model="checkList">
|
||||||
<el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox>
|
<el-checkbox class="checkbox" label="复选框 A"></el-checkbox>
|
||||||
<el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox>
|
<el-checkbox class="checkbox" label="复选框 B"></el-checkbox>
|
||||||
<el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox>
|
<el-checkbox class="checkbox" label="复选框 C"></el-checkbox>
|
||||||
<el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox>
|
<el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
|
||||||
|
<el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>{{ checkList }}</p>
|
<p>{{ checkList }}</p>
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox>
|
<el-checkbox-group v-model="checkList">
|
||||||
<el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox>
|
<el-checkbox class="checkbox" label="复选框 A"></el-checkbox>
|
||||||
<el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox>
|
<el-checkbox class="checkbox" label="复选框 B"></el-checkbox>
|
||||||
<el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox>
|
<el-checkbox class="checkbox" label="复选框 C"></el-checkbox>
|
||||||
<el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox>
|
<el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
|
||||||
|
<el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -101,10 +105,21 @@ vm.name === vm.a
|
||||||
vm.name === vm.b
|
vm.name === vm.b
|
||||||
```
|
```
|
||||||
|
|
||||||
## API
|
## checkbox API
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|---------- |-------- |---------- |------------- |-------- |
|
|---------- |-------- |---------- |------------- |-------- |
|
||||||
| model | 绑定值 | string\|string[]\|boolean | | |
|
| value | 绑定值 | string\|string[]\|boolean | | |
|
||||||
| value | 真实值 | string | | |
|
| label | 真实值 | string | | |
|
||||||
| label | 显示值,不填则显示 value | string | | |
|
| true-label | 选中时的真实值 | string | | |
|
||||||
|
| true-label | 没有选中时的真实值 | string | | |
|
||||||
| disabled | 禁用 | boolean | true, false | false |
|
| disabled | 禁用 | boolean | true, false | false |
|
||||||
|
|
||||||
|
## checkbox group API
|
||||||
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|
|---------- |-------- |---------- |------------- |-------- |
|
||||||
|
| value | 绑定值 | string\|string[]\|boolean | | |
|
||||||
|
|
||||||
|
## checkbox group 事件
|
||||||
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|
|---------- |-------- |---------- |
|
||||||
|
| change | 当绑定值变化时触发的事件 | (value: string) |
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
value(value) {
|
value(value) {
|
||||||
|
this.$emit('change', value);
|
||||||
this.dispatch('form-item', 'el.form.change', value);
|
this.dispatch('form-item', 'el.form.change', value);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
<span class="el-checkbox__input">
|
<span class="el-checkbox__input">
|
||||||
<span class="el-checkbox__inner"
|
<span class="el-checkbox__inner"
|
||||||
:class="{
|
:class="{
|
||||||
'is-disabled': isLimit || disabled,
|
'is-disabled': disabled,
|
||||||
'is-checked': checked,
|
'is-checked': checked,
|
||||||
'is-indeterminate': indeterminate,
|
'is-indeterminate': indeterminate,
|
||||||
'is-focus': focus
|
'is-focus': focus
|
||||||
|
@ -18,7 +18,7 @@
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@focus="focus = true"
|
@focus="focus = true"
|
||||||
@blur="focus = false"
|
@blur="focus = false"
|
||||||
:disabled="isLimit || disabled"
|
:disabled="disabled"
|
||||||
ref="checkbox">
|
ref="checkbox">
|
||||||
<input
|
<input
|
||||||
v-else
|
v-else
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
@focus="focus = true"
|
@focus="focus = true"
|
||||||
@blur="focus = false"
|
@blur="focus = false"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
:disabled="isLimit || disabled">
|
:disabled="disabled">
|
||||||
</span>
|
</span>
|
||||||
<span class="el-checkbox__label">
|
<span class="el-checkbox__label">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
@ -38,20 +38,7 @@
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import Emitter from 'main/mixins/emitter';
|
import Emitter from 'main/mixins/emitter';
|
||||||
/**
|
|
||||||
* checkbox
|
|
||||||
* @module components/basic/checkbox
|
|
||||||
* @desc 多选按钮
|
|
||||||
* @param {string[]} value - 绑定值
|
|
||||||
* @param {string} value - 真实值
|
|
||||||
* @param {string} [label] - 显示值
|
|
||||||
* @param {boolean} [disabled=false] - 是否禁用
|
|
||||||
*
|
|
||||||
* @example
|
|
||||||
* <el-checkbox :value.sync="data" value="Jack"></el-checkbox>
|
|
||||||
* <el-checkbox :value.sync="data" value="John"></el-checkbox>
|
|
||||||
* <el-checkbox :value.sync="data" value="Mike" disabled></el-checkbox>
|
|
||||||
*/
|
|
||||||
export default {
|
export default {
|
||||||
name: 'ElCheckbox',
|
name: 'ElCheckbox',
|
||||||
|
|
||||||
|
@ -64,12 +51,8 @@
|
||||||
},
|
},
|
||||||
indeterminate: Boolean,
|
indeterminate: Boolean,
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
trueLabel: {
|
trueLabel: [String, Number],
|
||||||
default: ''
|
falseLabel: [String, Number]
|
||||||
},
|
|
||||||
falseLabel: {
|
|
||||||
default: ''
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -92,7 +75,7 @@
|
||||||
return this._value;
|
return this._value;
|
||||||
} else if (type === '[object Array]') {
|
} else if (type === '[object Array]') {
|
||||||
return this._value.indexOf(this.label) > -1;
|
return this._value.indexOf(this.label) > -1;
|
||||||
} else if (type === '[object String]') {
|
} else if (type === '[object String]' || type === '[object Number]') {
|
||||||
return this._value === this.trueLabel;
|
return this._value === this.trueLabel;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -100,26 +83,14 @@
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isLimit: false,
|
|
||||||
focus: false
|
focus: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
checked(sure) {
|
checked(sure) {
|
||||||
this.$emit('on-change', sure);
|
this.$emit('change', sure);
|
||||||
this.dispatch('element.checkbox', sure);
|
|
||||||
}
|
}
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
this.$on('element.checkbox.disabled', () => {
|
|
||||||
if (this.checked) return;
|
|
||||||
this.isLimit = true;
|
|
||||||
});
|
|
||||||
this.$on('element.checkbox.enabled', () => {
|
|
||||||
this.isLimit = false;
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<span class="el-tree-node__expand-icon"
|
<span class="el-tree-node__expand-icon"
|
||||||
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
|
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
|
||||||
></span>
|
></span>
|
||||||
<el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" v-model="node.checked" :true-label="true" :false-label="false" @on-change="handleCheckChange"></el-checkbox>
|
<el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" v-model="node.checked" :true-label="true" :false-label="false" @change="handleCheckChange"></el-checkbox>
|
||||||
<!--<span class="el-tree-node__icon {{ node.icon }} {{ node.loading ? 'el-icon-loading' : '' }}" v-if="node.icon"></span>-->
|
<!--<span class="el-tree-node__icon {{ node.icon }} {{ node.loading ? 'el-icon-loading' : '' }}" v-if="node.icon"></span>-->
|
||||||
<span class="el-tree-node__label">{{ node.label }}</span>
|
<span class="el-tree-node__label">{{ node.label }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue