【QQYUN-5777】修复表格radio变成了checkbox的问题

pull/663/head
zhangdaiscott 2023-07-18 17:21:03 +08:00
parent 2b263e7da4
commit 8836149607
2 changed files with 65 additions and 4 deletions

View File

@ -1,11 +1,19 @@
<!-- 自定义选择列表头实现部分 -->
<template>
<a-checkbox :checked="checked" :indeterminate="isHalf" @update:checked="onChange" />
<template v-if="isRadio">
<!-- radio不存在全选所以放个空标签 -->
<span></span>
</template>
<a-checkbox v-else :checked="checked" :indeterminate="isHalf" @update:checked="onChange" />
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
isRadio: {
type: Boolean,
required: true,
},
selectedLength: {
type: Number,
required: true,
@ -20,11 +28,17 @@
//
const checked = computed(() => {
if (props.isRadio) {
return false;
}
return props.selectedLength > 0 && props.selectedLength >= props.pageSize;
});
//
const isHalf = computed(() => {
if (props.isRadio) {
return false;
}
return props.selectedLength > 0 && props.selectedLength < props.pageSize;
});

View File

@ -4,7 +4,7 @@ import type { BasicTableProps, PaginationProps, TableRowSelection } from '/@/com
import { computed, nextTick, onUnmounted, ref, toRaw, unref, watch, watchEffect } from 'vue';
import { omit } from 'lodash-es';
import { throttle } from 'lodash-es';
import { Checkbox } from 'ant-design-vue';
import { Checkbox, Radio } from 'ant-design-vue';
import { isFunction } from '/@/utils/is';
import { findNodeAll } from '/@/utils/helper/treeHelper';
import { ROW_KEY } from '/@/components/Table/src/const';
@ -61,6 +61,11 @@ export function useCustomSelection(
};
});
// 是否是单选
const isRadio = computed(() => {
return getRowSelectionRef.value?.type === 'radio';
});
const getAutoCreateKey = computed(() => {
return unref(propsRef).autoCreateKey && !unref(propsRef).rowKey;
});
@ -95,11 +100,23 @@ export function useCustomSelection(
const selectHeaderProps = computed(() => {
return {
onSelectAll,
isRadio: isRadio.value,
selectedLength: flattedData.value.filter((data) => selectedKeys.value.includes(getRecordKey(data))).length,
pageSize: currentPageSize.value,
};
});
// 监听传入的selectedRowKeys
watch(
() => unref(propsRef)?.rowSelection?.selectedRowKeys,
(val: string[]) => {
if (Array.isArray(val)) {
setSelectedRowKeys(val);
}
},
{ immediate: true }
);
// 当任意一个变化时,触发同步检测
watch([selectedKeys, selectedRows], () => {
nextTick(() => {
@ -233,6 +250,11 @@ export function useCustomSelection(
function updateSelected(record, checked) {
const recordKey = getRecordKey(record);
if (isRadio.value) {
selectedKeys.value = [recordKey];
selectedRows.value = [record];
return;
}
const index = selectedKeys.value.findIndex((key) => key === recordKey);
if (checked) {
if (index === -1) {
@ -290,10 +312,22 @@ export function useCustomSelection(
}
// 自定义渲染Body
function bodyCustomRender({ record, index }) {
function bodyCustomRender(params) {
const { index } = params;
if (!recordIsShow(index)) {
return '';
}
if (isRadio.value) {
return renderRadioComponent(params);
} else {
return renderCheckboxComponent(params);
}
}
/**
* checkbox
*/
function renderCheckboxComponent({ record }) {
const recordKey = getRecordKey(record);
// 获取用户自定义checkboxProps
const checkboxProps = ((getCheckboxProps) => {
@ -309,7 +343,20 @@ export function useCustomSelection(
return (
<Checkbox
{...checkboxProps}
data-index={index}
key={'j-select__' + recordKey}
checked={selectedKeys.value.includes(recordKey)}
onUpdate:checked={(checked) => onSelect(record, checked)}
/>
);
}
/**
* radio
*/
function renderRadioComponent({ record }) {
const recordKey = getRecordKey(record);
return (
<Radio
key={'j-select__' + recordKey}
checked={selectedKeys.value.includes(recordKey)}
onUpdate:checked={(checked) => onSelect(record, checked)}