<template>
|
<a-radio-group :class="clazz" :value="innerValue" v-bind="cellProps" @change="(e) => handleChangeCommon(e.target.value)">
|
<a-radio v-for="item of originColumn.options" :key="item.value" :value="item.value" @click="(e) => handleRadioClick(item, e)"
|
>{{ item.text || item.label || item.title || item.value }}
|
</a-radio>
|
</a-radio-group>
|
</template>
|
|
<script lang="ts">
|
import { computed, defineComponent } from 'vue';
|
import { JVxeComponent } from '/@/components/jeecg/JVxeTable/types';
|
import { useJVxeComponent, useJVxeCompProps } from '/@/components/jeecg/JVxeTable/hooks';
|
|
export default defineComponent({
|
name: 'JVxeRadioCell',
|
props: useJVxeCompProps(),
|
setup(props: JVxeComponent.Props) {
|
const { innerValue, cellProps, originColumn, handleChangeCommon } = useJVxeComponent(props);
|
const scrolling = computed(() => !!props.renderOptions.scrolling);
|
const clazz = computed(() => {
|
return {
|
'j-vxe-radio': true,
|
'no-animation': scrolling.value,
|
};
|
});
|
|
function handleRadioClick(item) {
|
if (originColumn.value.allowClear === true) {
|
// 取消选择
|
if (item.value === innerValue.value) {
|
handleChangeCommon(null);
|
}
|
}
|
}
|
|
return {
|
clazz,
|
innerValue,
|
originColumn,
|
cellProps,
|
handleRadioClick,
|
handleChangeCommon,
|
};
|
},
|
// 【组件增强】注释详见：JVxeComponent.Enhanced
|
enhanced: {
|
switches: { visible: true },
|
} as JVxeComponent.EnhancedPartial,
|
});
|
</script>
|
|
<style lang="less">
|
// 关闭动画，防止滚动时动态赋值出现问题
|
.j-vxe-radio.no-animation {
|
.ant-radio-inner,
|
.ant-radio-inner::after {
|
transition: none !important;
|
}
|
}
|
</style>
|
