Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BasicTable在使用clickToRowSelect=true的状态下,selection-change 事件在每次选中项切换后会触发多次 #6408

Closed
Randname666 opened this issue Mar 16, 2024 · 2 comments

Comments

@Randname666
Copy link

Randname666 commented Mar 16, 2024

版本号:

3.6.2 (ffc79bc)

问题描述:

BasicTable在使用clickToRowSelect=true的状态下,selection-change 事件在每次选中项切换后会触发多次。设置clickToRowSelect=false,表现正常。

截图&代码:
<BasicTable @register="registerTable" :rowSelection="rowSelection" @selection-change="selectionChangeEvent">

(...)

</BasicTable>

<script lang="ts" name="ProjectInfo" setup>
const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
    tableProps: {
      title: '主项目',
      api: queryIndex,
      rowKey: 'id',
      rowSelection: { type: 'radio' },
      columns,
      canResize: true,
      minHeight: 500,
      clickToRowSelect: true,
      formConfig: {
        schemas: searchFormSchema,
        autoSubmitOnEnter: true,
        showAdvancedButton: true,
        fieldMapToNumber: [],
        fieldMapToTime: [],
      },
      actionColumn: {
        width: 120,
        fixed: 'right',
      },
      beforeFetch: (params) => {
        params.isChildren = '0';
        return Object.assign(params, queryParam);
      },
    },
    exportConfig: {
      name: 'project_info',
      url: getExportUrl,
      params: queryParam,
    },
    importConfig: {
      url: getImportUrl,
      success: handleSuccess,
    },
  });

(...)

function selectionChangeEvent(sel) {
    console.log("event happening, timestamp:"+Number(new Date()));
  }
</script>

截屏2024-03-16 09 25 42
每次选中项切换,产生多次事件,但点击“清空”只产生一次事件。

友情提示(为了提高issue处理效率):

  • 未按格式要求发帖,会被直接删掉;
  • 请自己初判问题描述是否清楚,是否方便我们调查处理;
  • 描述过于简单或模糊,导致无法处理的,会被直接删掉;
@zhangdaiscott
Copy link
Member

zy

@liaozhiyang
Copy link

已修复,下一版本发布。
你本地可按如下进行修改:

在 src/components/Table/src/hooks/useCustomSelection.tsx 文件
image


function renderRadioComponent({ record }) {
    const recordKey = getRecordKey(record);
    // update-begin--author:liaozhiyang---date:20231016---for:【QQYUN-6794】table列表增加radio禁用功能
    // 获取用户自定义radioProps
    const checkboxProps = (() => {
      const rowSelection = propsRef.value.rowSelection;
      if (rowSelection?.getCheckboxProps) {
        return rowSelection.getCheckboxProps(record);
      }
      return {};
    })();
    // update-end--author:liaozhiyang---date:20231016---for:【QQYUN-6794】table列表增加radio禁用功能
    return (
      <Radio
        {...checkboxProps}
        key={'j-select__' + recordKey}
        checked={selectedKeys.value.includes(recordKey)}
        onUpdate:checked={(checked) => onSelect(record, checked)}
        onClick={(e) => e.stopPropagation()}
      />
    );
  }


function renderCheckboxComponent({ record }) {
    const recordKey = getRecordKey(record);
    // 获取用户自定义checkboxProps
    const checkboxProps = ((getCheckboxProps) => {
      if (typeof getCheckboxProps === 'function') {
        try {
          return getCheckboxProps(record) ?? {};
        } catch (error) {
          console.error(error);
        }
      }
      return {};
    })(propsRef.value.rowSelection?.getCheckboxProps);
    return (
      <Checkbox
        {...checkboxProps}
        key={'j-select__' + recordKey}
        checked={selectedKeys.value.includes(recordKey)}
        onUpdate:checked={(checked) => onSelect(record, checked)}
        onClick={(e) => e.stopPropagation()}
      />
    );
  }

@zhangdaiscott zhangdaiscott transferred this issue from jeecgboot/JeecgBoot-vue3 Jun 21, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants