标签：vue record selected item 全选 selectedRows antd selectionRows id

如果直接使用ant中的table只采用的onSelect方法会出现只保留当前选中的值,无法进行全选,并且在进行分页选中的时候只保留当前的选中的信息,之后选中的信息会丢失,要解决这个问题还需要使用onSelectAll方法

具体内容如下:

a-table代码:

<a-table
      ref="table"
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange,onSelect:onSelect, onSelectAll:onSelectAll}"
      :customRow="handleCheck"
      @change="handleTableChange"
    >
    </a-table>

js代码

 onSelectChange (selectedRowKeys,selectedRows) {
        this.selectedRowKeys = selectedRowKeys  ;
        // this.selectionRows = selectedRows;

      },
      onSelect(record, selected){
          console.log(`record: ${record}`,`select: ${selected}`)
        if(selected == true ){
          this.selectionRows.push(record);
        }else {
          this.selectionRows.forEach(function(item,index,arr){
            if(item.id == record.id) {
              arr.splice(index, 1);
            }
          })
        }

      },

        onSelectAll (selected,selectedRows, changeRows) {
            if (selected) {
                console.log(this.selectionRows);
                console.log(this.selectionRows.concat(changeRows));
                this.selectionRows = this.selectionRows.concat(changeRows);
            }

            if (!selected) {
                let selectedRows = JSON.parse(JSON.stringify(this.selectionRows));

                let delIndex = [];
                selectedRows.forEach((item, index) => {
                    changeRows.forEach((val, itemIndex) => {
                        if (item.id === val.id) {
                            delIndex.push(index);
                        }
                    })
                })

                delIndex.forEach(item => {
                    delete selectedRows[item];
                })

                selectedRows = selectedRows.filter(item => {
                    return item != undefined;
                })
                this.selectionRows = selectedRows
            }
        },

标签：vue,record,selected,item,全选,selectedRows,antd,selectionRows,id
来源： https://www.cnblogs.com/1gaoyu/p/15893571.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。