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
}
相关推荐
开心工作室_kaic1 分钟前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿20 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具41 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
customer081 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
清灵xmf1 小时前
TypeScript 类型进阶指南
javascript·typescript·泛型·t·infer
小白学大数据1 小时前
JavaScript重定向对网络爬虫的影响及处理
开发语言·javascript·数据库·爬虫
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
334554322 小时前
element动态表头合并表格
开发语言·javascript·ecmascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理