站长之家最新网站,google adsense wordpress 插件,企业官方网站建设费用,移动端网站建站视频Ant-design-vue 库中 Table 组件 API 有个 rowKey 属性#xff1a;表格行 key 的取值#xff0c;既可以是字符串#xff0c;也可以是一个函数#xff0c;它在 rowSelection 选择功能的配置中尤为重要。 在勾选或者取消选中项回调的 onChange 事件中#xff0c;有两个参数返… Ant-design-vue 库中 Table 组件 API 有个 rowKey 属性表格行 key 的取值既可以是字符串也可以是一个函数它在 rowSelection 选择功能的配置中尤为重要。 在勾选或者取消选中项回调的 onChange 事件中有两个参数返回分别是 selectedRowKeys 和 selectedRows。selectedRowKeys 是勾选的 rowKey 值的数组selectedRows 是勾选的数组。 使用 rowKey 将其绑定为某个字段这里指的是我们该字段相同的值同时勾选或者取消勾选的字段这里的确可以实现样式上的同时勾选但是 selectedRowKeys 和 selectedRows 都只有一项数据勾选后统计勾选的数据信息汇总就存在问题了因此我们如何实现该功能呢具体代码如下
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 selectedRowKeysthis.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 方法刷新表格勾选状态。
table-listreftable sizesmallrowKey{this.rowKey} borderedcolumns{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 的勾选项添上在统计数据汇总时就避免了汇总不正确的问题啦。
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
}
