123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103 |
- <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>
|