ant-design-vue table 同时勾选或者取消勾选某字段值相同的数据

Ant-design-vue 库中 Table 组件 API 有个 rowKey 属性:表格行 key 的取值,既可以是字符串,也可以是一个函数,它在 rowSelection 选择功能的配置中尤为重要。

在勾选或者取消选中项回调的 onChange 事件中,有两个参数返回,分别是 selectedRowKeys 和 selectedRows。selectedRowKeys 是勾选的 rowKey 值的数组,selectedRows 是勾选的数组。

使用 rowKey 将其绑定为某个字段(这里指的是我们该字段相同的值同时勾选或者取消勾选的字段),这里的确可以实现样式上的同时勾选,但是 selectedRowKeys 和 selectedRows 都只有一项数据,勾选后统计勾选的数据信息汇总就存在问题了,因此我们如何实现该功能呢?具体代码如下:

js 复制代码
handleSelectChange (selectedRowKeys, selectedRows) {
  if (selectedRowKeys.length) {
    // this.selectedRows 与 selectedRows 的差集
    const difference = this.selectedRows.filter(item => !selectedRows.map(row => row.id).includes(item.id))
    // 本次勾选条数小于上次勾选条数,说明是取消勾选
    const rows = this.selectedRowsLength > selectedRows.length
      // 取消勾选,需要过滤掉差集中 rpoNo 不相同的数据
      ? selectedRows.filter(item => ![...new Set(difference.map(item => item.rpoNo))].includes(item.rpoNo))
      // 勾选,需要 selectedRows 中的数据
      : (this.tableData.length === selectedRows.length && this.selectedRowsLength === this.tableData.length) ? [] : selectedRows

    // 根据 rpoNo 过滤出所有勾选数据
    const data = rows.map(item => {
      return this.tableData.filter(record => record.rpoNo === item.rpoNo)
    }).flat()
    // 清空勾选
    this.$refs.table.$refs.tableList.clearSelected()
    // 本次勾选数据
    this.selectedRowKeys = [...new Set(data.map(item => item[this.rowKey]))]
    this.selectedRows = mergeWeightRemoval(data, [], this.rowKey) || []
    // 本次勾选条数
    this.selectedRowsLength = this.selectedRowKeys.length
    // 刷新表格勾选状态
    this.$refs.table.$refs.tableList.refreshStatic()
  } else {
    this.selectedRowKeys = selectedRowKeys
    this.selectedRows = selectedRows
  }
},
  • selectedRows 为已勾选数据,this.tableData 为当前页数据,this.selectedRows 为所有勾选数据
  • 首先取 this.selectedRows 与 selectedRows 的差集,即获取到本次操作的数据 difference
  • 其次使用 this.selectedRowsLength 与 selectedRows 比较是勾选操作还是取消勾选操作
  • 如果是取消操作的话,我们需要把某字段值相同的数据也要取消掉,因此这里我们对 selectedRows 过滤掉不包含在 difference 中的数据,如果是勾选的话,就无需处理,此时我们就得到了目前勾选数据 row
  • 我们需要根据勾选的数据,在 tableData 找出某字段值相同的数据,并且也勾选上,因此遍历 row 数组,通过 tableData 使用 filter 找出某字段值相同的所有数据 data
  • 最后我们将 data 中的数据复制到 selectedRowKeys 和 selectedRows 中,同时记录当前勾选条数,在此之前我们使用 clearSelected 方法清空了勾选项,以及调用 refreshStatic 方法刷新表格勾选状态。
js 复制代码
<table-list
  ref="table" size="small"
  rowKey={this.rowKey} bordered
  columns={config.notWriteOffColumns.call(this, h)}
  dataSource={this.getList} 
  row-selection={{
    fixed: true,
    getCheckboxProps: record => ({
      props: {
        defaultChecked: this.selectedRowKeys.length 
        	? this.selectedRowKeys.includes(record[this.rowKey]) : false,
      },
    }),
    onChange: this.handleSelectChange.bind(this),
  }}
  scopedSlotsList={this.scopedSlotsList}
/>

优化版

上述我们通过人为筛选了需要勾选的数据,后来我又尝试修改 rowKey 字段,此时 selectedRowKeys 和 selectedRows 只有一项的话,我们就人为 selectedRows 的勾选项添上,在统计数据汇总时,就避免了汇总不正确的问题啦。

js 复制代码
handleSelectChange (selectedRowKeys, selectedRows) {
  // 根据 rpoNo 过滤出所有勾选数据
  const data = selectedRows.map(item => {
    return this.tableData.filter(record => record.rpoNo === item.rpoNo)
  }).flat()
  const row = mergeWeightRemoval(data, [], 'id') || []
  this.selectedRowKeys = [...new Set(row.map(item => item[this.rowKey]))]
  this.selectedRows = row
}
相关推荐
腾讯TNTWeb前端团队23 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试