vue antd table 实现分页多选

最新推荐文章于 2024-05-10 16:42:29 发布

@搬砖工

最新推荐文章于 2024-05-10 16:42:29 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_50867375/article/details/133035806

版权

html 部分

                      <a-table
                        :rowSelection="{ onSelect: onSelect, onSelectAll: onSelectAll, selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                        class="table"
                        ref="table"
                        size="middle"
                        rowKey="id"
                        defaultExpandAllRows
                        :columns="columns"
                        :data="loadData"
                        :options="options"
                        showPagination="auto"
                        :pageSize="10"
                        :showRowNumber="true"
                      >
                      </a-table>

js部分

        onSelectChange(selectedRowKeys, selectionRows) {
            console.log(selectionRows)
            console.log('select', this.selectedRowKeys, this.selectedRowKeys)
            this.selectedRowKeys = selectedRowKeys
            // this.selectionRows = selectionRows  //不用onchange操作
        },
        onSelect(record, selected, selectionRows, nativeEvent) {
            console.log(selectionRows, nativeEvent)
            if (selected) {
                this.selectionRows.push(record)
            } else {
                const delIndex = this.selectionRows.findIndex(val => {
                    return val.id === record.id
                })
                this.selectionRows.splice(delIndex, 1)
            }
        },
        onSelectAll(selected, selectionRows, changeRows) {
            console.log(selectionRows)
            if (selected) {
                this.selectionRows = this.selectionRows.concat(changeRows)
            }
            if (!selected) {
                let selectionRows = JSON.parse(JSON.stringify(this.selectionRows))
                const delIndex = []
                selectionRows.forEach((item, index) => {
                    changeRows.forEach(val => {
                        if (item.id === val.id) {
                            delIndex.push(index)
                        }
                    })
                })
                delIndex.forEach(item => {
                    delete selectionRows[item]
                })
                selectionRows = selectionRows.filter(item => {
                    return item !== undefined
                })
                this.selectionRows = selectionRows
            }
        },```