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

当NDataTable同时使用selection与summary时,汇总栏的selection列不能自定义内容 #6703

Open
3 tasks done
experience9091 opened this issue Jan 12, 2025 · 4 comments

Comments

@experience9091
Copy link

Clear and concise description of the problem

当NDataTable同时使用selection与summary时,汇总栏的selection列是空白内容。

Suggested solution

可否自定义汇总栏的selection列内容,比如我想将“汇总”这两个文字放在这里

Alternative

No response

Additional context

No response

Validations

  • Read the Contributing Guidelines.
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
@experience9091 experience9091 added the feature request New feature or request label Jan 12, 2025
@jahnli jahnli added waiting for response and removed feature request New feature or request labels Jan 18, 2025
@jahnli
Copy link
Collaborator

jahnli commented Jan 18, 2025

Provide a based on Playground or CodeSandbox or stackblitz `s MinimalReproducible Example

@experience9091
Copy link
Author

experience9091 commented Jan 20, 2025

抱歉没能把问题描述清楚,我所实现的功能如下:

<script setup lang="ts">
import { ref } from 'vue';
import { NDataTable } from 'naive-ui';
import type { DataTableCreateSummary, DataTableRowKey } from 'naive-ui';

const columns = [
  {
    type: 'selection',
    fixed: 'left'
  },
  {
    title: '数据1',
    key: 'dataNum1'
  },
  {
    title: '数据2',
    key: 'dataNum2'
  }
];

const mockData = ref([
  {
    dataNum1: 11,
    dataNum2: 55
  },
  {
    dataNum1: 5,
    dataNum2: 5
  }
]);

/** 表格汇总 */
const summary: DataTableCreateSummary = pageData => {
  const result = {};
  columns.forEach(item => {
    result[item.key] = {
        value: (pageData as unknown as NaiveWidgetTypes.RowData[]).reduce((prevValue, row) => {
            return prevValue + row[item.key] || 0;
        }, 0)
    };
  });
  return result;
};
</script>

<template>
    <NDataTable
        :columns="columns"
        :data="mockData"
        size="small"
        :single-line="false"
        :summary="summary"
    />
</template>

@experience9091
Copy link
Author

我最终的目的是想在selection列的summary行显示"合计"或者"汇总"的字样,结果并没有成功。
下面是我的代码,我尝试将selection加上key,并将summary进行修改

<script setup lang="ts">
import { ref } from 'vue';
import { NDataTable } from 'naive-ui';
import type { DataTableCreateSummary, DataTableRowKey } from 'naive-ui';

const columns = [
  {
    type: 'selection',
    key: 'no',
    fixed: 'left'
  },
  {
    title: '数据1',
    key: 'dataNum1'
  },
  {
    title: '数据2',
    key: 'dataNum2'
  }
];

const mockData = ref([
  {
    dataNum1: 11,
    dataNum2: 55
  },
  {
    dataNum1: 5,
    dataNum2: 5
  }
]);

/** 表格汇总 */
const summary: DataTableCreateSummary = pageData => {
  const sum = key => {
    return (pageData as unknown as NaiveWidgetTypes.RowData[]).reduce((prevValue, row) => {
      return prevValue + row[key] || 0;
    }, 0);
  };
  return {
    no: { value: '合计' },
    dataNum1: { value: sum('dataNum1') },
    dataNum2: { value: sum('dataNum2') },
  };
};
</script>

<template>
    <NDataTable
        :columns="columns"
        :data="mockData"
        size="small"
        :single-line="false"
        :summary="summary"
    />
</template>

@experience9091
Copy link
Author

我最终的解决办法是使用了“序号”列,在序号列上添加的文字。
但这并不是最好的解决办法,毕竟不是所有的使用场景都需要序号,目前的情况是要添加“合计”文字,就必须使用其他列

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants