JVxeCheckboxCell.vue
2.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<template>
<div :class="clazz" :style="boxStyle">
<a-checkbox
ref="checkbox"
:checked="innerValue"
v-bind="cellProps"
@change="handleChange"
/>
</div>
</template>
<script>
import { neverNull } from '@/utils/util'
import JVxeCellMixins from '@/components/jeecg/JVxeTable/mixins/JVxeCellMixins'
export default {
name: 'JVxeCheckboxCell',
mixins: [JVxeCellMixins],
props: {},
computed: {
bordered() {
return !!this.renderOptions.bordered
},
scrolling() {
return !!this.renderOptions.scrolling
},
clazz() {
return {
'j-vxe-checkbox': true,
'no-animation': this.scrolling
}
},
boxStyle() {
const style = {}
// 如果有边框且未设置align属性，就强制居中
if (this.bordered && !this.originColumn.align) {
style['text-align'] = 'center'
}
return style
},
},
methods: {
handleChange(event) {
this.handleChangeCommon(event.target.checked)
},
},
// 【组件增强】注释详见：JVxeCellMixins.js
enhanced: {
switches: {
visible: true,
},
getValue(value) {
let {own: col} = this.column
// 处理 customValue
if (Array.isArray(col.customValue)) {
let customValue = getCustomValue(col)
if (typeof value === 'boolean') {
return value ? customValue[0] : customValue[1]
} else {
return value
}
} else {
return value
}
},
setValue(value) {
let {own: col} = this.column
// 判断是否设定了customValue（自定义值）
if (Array.isArray(col.customValue)) {
let customValue = getCustomValue(col)
return neverNull(value).toString() === customValue[0].toString()
} else {
return !!value
}
},
createValue({column}) {
let {own: col} = column
if (Array.isArray(col.customValue)) {
let customValue = getCustomValue(col)
return col.defaultChecked ? customValue[0] : customValue[1]
} else {
return !!col.defaultChecked
}
},
}
}
function getCustomValue(col) {
let customTrue = neverNull(col.customValue[0], true)
let customFalse = neverNull(col.customValue[1], false)
return [customTrue, customFalse]
}
</script>
<style lang="less">
// 关闭动画，防止滚动时动态赋值出现问题
.j-vxe-checkbox.no-animation {
.ant-checkbox-inner,
.ant-checkbox-inner::after {
transition: none !important;
}
}
</style>