<template>
|
<div :class="boxClass" :style="boxStyle">
|
<a-checkbox :checked="innerValue" v-bind="cellProps" @change="handleChange" />
|
</div>
|
</template>
|
|
<script lang="ts">
|
import { computed, defineComponent } from 'vue';
|
import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
|
import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
|
import { isArray, isBoolean } from '/@/utils/is';
|
|
export default defineComponent({
|
name: 'JVxeCheckboxCell',
|
props: useJVxeCompProps(),
|
setup(props: JVxeComponent.Props) {
|
const { innerValue, cellProps, originColumn, scrolling, handleChangeCommon } = useJVxeComponent(props);
|
// 是否启用边框
|
const bordered = computed(() => !!props.renderOptions.bordered);
|
// box 类名
|
const boxClass = computed(() => {
|
return {
|
'j-vxe-checkbox': true,
|
'no-animation': scrolling.value,
|
};
|
});
|
// box 行内样式
|
const boxStyle = computed(() => {
|
const style = {};
|
// 如果有边框且未设置align属性，就强制居中
|
if (bordered.value && !originColumn.value.align) {
|
style['text-align'] = 'center';
|
}
|
return style;
|
});
|
|
// onChange 事件
|
function handleChange(event) {
|
handleChangeCommon(event.target.checked);
|
}
|
|
return {
|
cellProps,
|
innerValue,
|
boxClass,
|
boxStyle,
|
handleChange,
|
};
|
},
|
|
// 【组件增强】注释详见：JVxeComponent.Enhanced
|
enhanced: {
|
switches: {
|
visible: true,
|
},
|
getValue(value, ctx) {
|
let { context } = ctx!;
|
let { originColumn } = context;
|
// 处理 customValue
|
if (isArray(originColumn.value.customValue)) {
|
let customValue = getCustomValue(originColumn.value);
|
if (isBoolean(value)) {
|
return value ? customValue[0] : customValue[1];
|
} else {
|
return value;
|
}
|
} else {
|
return value;
|
}
|
},
|
setValue(value, ctx) {
|
let { context } = ctx!;
|
let { originColumn } = context;
|
// 判断是否设定了customValue（自定义值）
|
if (isArray(originColumn.value.customValue)) {
|
let customValue = getCustomValue(originColumn.value);
|
return neverNull(value).toString() === customValue[0].toString();
|
} else {
|
return !!value;
|
}
|
},
|
createValue(_defaultValue, ctx) {
|
let { context } = ctx!;
|
let {
|
column: { params: col },
|
} = context;
|
if (isArray(col.customValue)) {
|
let customValue = getCustomValue(col);
|
return col.defaultChecked ? customValue[0] : customValue[1];
|
} else {
|
return !!col.defaultChecked;
|
}
|
},
|
} as JVxeComponent.EnhancedPartial,
|
});
|
|
function neverNull(value, def?) {
|
return value == null ? neverNull(def, '') : value;
|
}
|
|
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>
|
