antd-vue table 分页缓存已勾选数据

<a-table
  size="small" bordered
  rowKey={this.rowKey}
  row-selection={{
    type: this.selectType,
    selectedRows: this.selectedRows,
    selectedRowKeys: this.selectedRowKeys,
    onChange: this.handleSelectChange.bind(this),
  }}
  scroll={ { y: 600 } } pagination={true}
  pagination={this.pagination}
  on-change={this.tableChange}
  data-source={this.tableData}
  columns={columns.call(this, h)}
  {...{ scopedSlots: this.scopedSlotsList }}
/>

分页

<a-table
  ......
  scroll={ { y: 600 } } pagination={true}
  pagination={this.pagination}
  on-change={this.tableChange}
  ......
/>

分页配置

pagination: {
  total: 0, // 数据总数
  current: 1, // 当前页数
  defaultPageSize: 100, // 默认每页显示10条数据
  showTotal: null, // 展示总共有几条数据
  showSizeChanger: false, // 显示修改pageSize的下拉框
  pageSizeOptions: ['100'], // 设置pageSize的可选值，页面可以通过下拉框进行选择
  onShowSizeChange: (current, pageSize) => {
    this.pageSize = pageSize
  }
},

数据请求

async getList (paging) {
  if (!this.method) return
  if (!this.init) {
    return {
      rows: [],
    }
  }
  const fn = this.method
  const { data = {} } = await fn({
    ...this.paramValue,
    ...this.cacheQuery,
    ...paging,
    pageSize: this.pageSize,
    currentNo: this.pagination.current,
  })

  let rows = ([...data.rows] || []).map(item => {
    // 缓存 已勾选的数据
    if (this.selectedRowKeys.length && this.selectedRowKeys.includes(item[this.rowKey])) {
      const row = this.selectedRows.find(row => row[this.rowKey] === item[this.rowKey]) || {}
      return { ...item, qcAssistQty: row.qcAssistQty || 0, qcMainQty: row.qcMainQty || 0 }
    }
    return {
      ...item,
      qcAssistQty: item.assistQty || item.inInventoryAssistQty || 0,
      qcMainQty: item.mainQty || item.inInventoryQty || 0,
    }
  })
  this.tableData = rows
  this.pagination.total = data.totalElements || 0 // 总页数
  return { ...data, data: { rows } }
},

分页方法

tableChange (pagination, filters, sorter) {
  this.pagination = pagination
  this.getList()
},

搜索查询

handleSearch (query = {}) {
  this.init = true
  this.cacheQuery = { ...query }
  this.pagination.current = 1
  this.handleRefresh()
},

// 刷新数据
handleRefresh () {
  this.init = true
  this.clearSelected()
  this.getList()
},

// 清空勾选数据
clearSelected () {
  this.handleSelectChange([], [])
},

勾选数据

通过 rowSelection.selectedRowKeys 来控制选中项; 通过 rowSelection.selectedRows 来控制选择行数据, 当然我们也可以使用 rowSelection.selections 自定义选择配置项, 设为 true 时使用默认选择项.

对于带有分页的 table 数据, 如何处理勾选数据呢?

由于 selectedRowKeys 可以记录所有勾选的数据的 ID, 而 selectedRows 只会记录当前页选中项.

handleSelectChange (selectedRowKeys, selectedRows) {
  this.updateSelect(selectedRowKeys, selectedRows)
  this.$emit('select', this.selectedRows)
},
// 缓存已勾选的 selectedRows
updateSelect (selectedRowKeys, selectedRows) {
  let keyLength = selectedRowKeys.length
  let rowLength = this.selectedRows.length
  if (keyLength > rowLength) {
    // 不添加重复项
    selectedRows.forEach((row) => {
      let idx = this.selectedRows.findIndex((item) => item[this.rowKey] === row[this.rowKey])
      if (idx === -1) {
        this.selectedRows.push(row)
      }
    })
  } else {
    // 剔除反选项
    this.selectedRows = this.selectedRows.reduce((list, row) => {
      if (selectedRowKeys.includes(row[this.rowKey])) {
        list.push(row)
      }
      return list
    }, [])
  }
  this.selectedRowKeys = [...new Set(selectedRowKeys)]
},

默认勾选

通过 rowSelection.getCheckboxProps 来配置选择框的默认属性配置.

<a-table
  ....
  row-selection={{
    getCheckboxProps: record => {
      return {
        props: {
          defaultChecked: this.selectedRowKeys.includes(record[this.rowKey]),
        },
      }
    },
    selectedRowKeys: this.selectedRowKeys,
    onChange: this.handleSelectChange.bind(this),
  }}
  ......
/>

在初始化数据的时候, 我们需要添加选中的项.

async getInit () {
  // 调用接口
  this.selectedRows = data
  this.selectedRowKeys = data.filter(item => item.age > 17).map(item => item[this.rowKey])
},

勾选数据 table 列校验

computed: {
  // 异步规则
  asyncRules () {
    return function (record, key) {
      if (this.selectedRowKeys.includes(record[this.rowKey])) {
        return {
          validator: (rule, value, callback) => {
            return this.handleRule(key, value, record, callback)
          },
        }
      }
    }
  },
  // 作用域插槽
  scopedSlotsList () {
    const obj = {}
    Array.prototype.forEach.call(['qcAssistQty', 'qcMainQty'], item => {
      obj[item] = (text, record, index) => {
        return <cell-validate mode="a-input-number" class="w140"
          validateProp={`${item}${index}`}
          validators={validators}
          rules={this.asyncRules(record, item)}
          v-model={this.tableData[index][item]} />
      }
    })
    return obj
  },
},

校验规则

handleRule (key, value, record, callback) {
  if (Number(value) === 0) {
    return callback(new Error('数量不能为0'))
  }
  if (!Reg.numUnit(value)) {
    return callback(new Error('最多保留六位小数'))
  }
  ......
  return callback()
},

对勾选数据校验（包含非当前页勾选数据）。

// 对勾选数据校验
async handleSelectValidate () {
  const length = this.selectedRows.length
  // 未勾选，无需校验
  if (length === 0) {
    return Promise.resolve(true)
  }
  for (let index = 0; index < length; index++) {
    const rows = this.selectedRows[index]
    for await (let key of Object.keys(rows)) {
      if (['qcAssistQty', 'qcMainQty'].includes(key)) {
        try {
          await this.handleRule(key, rows[key], rows, function (err) {
            if (err) {
              throw new Error(err)
            }
          })
        } catch (error) {
          return Promise.resolve(false)
        }
      }
    }
  }
  return Promise.resolve(true)
},