Vue复选框翻页后同行复选框不取消、回到本页已选中数据复选框为选中状态、取消复选框删除选中数据、查看选中数据表格删除选中数据对应数据复选框置为可选！

目录

1.数据列表复选框操作

1.1列表

1.2相关属性以及方法

2.已选择数据列表

2.1列表

2.2相关属性以及方法

---

1.数据列表复选框操作

数据列表可以选定某条数据也可以取消选择某条数据，翻页所选函数回到本页照常显示

1.1列表

<!--
- columns：表格的列头信息，包含表格每列的名称、对齐方式等设置。 
- data-source：需要渲染在表格中的数据源，使用该属性可以快速展示数据。 
- row-selection：它返回一个对象，包含了表格行选中功能所需的配置信息。具体来说，该计算属性返回一个包含selectedRowKeys、onChange和getCheckboxProps属性的对象。在选择复选框时此方法会触发
- selectedRowKeys：保存当前选中的行的ID，该选项和row-selection一起使用。 
- pagination：是否开启分页功能。翻页触发 
- row-key：指定表格数据源的唯一标识符，以便保证表格的正确性。
-->
<div class="firmwareList" v-show="showFirmwareList">
    <a-table 
        :columns="columns" 
        :data-source="data" 
        :row-selection="rowSelection"
        :selectedRowKeys="selectedRowKeys"
        :pagination="pagination" row-key="id">
    </a-table>
</div>

         row-key="id"的作用就是记录已选中数据的标识，可以解决两个问题：一个是翻页以后已选数据同下标的数据复选框为选中状态，二是能翻页以后回到已有选择数据的页可以看到复选框为选中状态！

1.2相关属性以及方法

<script>
    export default{
        name:'TaskAdd',
        data(){
            return{
				selectedRowKeys:[],//所有选中数据的id
                //selectedRows:[],
                selectedRowsData: [],//所有已选中的数据
                //翻页
				pagination:{
                    current:1,
                    total:0,
                    pageSize:10,
                    showQuickJumper:true,
                    showSizeChanger:true,
                    //翻页触发
                    onChange:(page, pageSize)=>{
                        this.pagination.current=page
                        this.pagination.pageSize=pageSize
                        console.log(page, pageSize)
                        //调用搜索函数更新表单
                        this.search();
                    },
                    //每页条数发生变化
                    onShowSizeChange:(current, size)=>{
                        this.pagination.current=current
                        this.pagination.pageSize=size
                        console.log(current, size)
                        //嗲用搜索函数更新表单
                        this.search();
                    }
                },
            }
        },
        methods:{
        },
        mounted(){
        },
        computed: {
          rowSelection() {
            return {
              //selectedRowKeys: this.selectedRowKeys,
              //注意下方的参数是触发以后的所选所有数据的id，而this.selectedRowKeys还是触发之前的，所以可以这样做删除
              onChange: (selectedRowKeys, selectedRows) => {
				//取消选择数据的处理
                this.selectedRowKeys.forEach(row => { //遍历已经选中的行
                  if (!selectedRowKeys.find(item => item === row)){ //如果当前选中的行在新选中的行中不存在，说明该行被取消选中
					//注意已选择的id跟选中数据对象中的id
                    const index = this.selectedRowsData.findIndex((item) => item.id === row); //从selectedRowsData中查找对应的数据
                    if (index !== -1) {
                      this.selectedRowsData.splice(index, 1); //如果找到了，就将其删除
                    }
                  }
                })
                //将更新后的key覆盖就keys
                this.selectedRowKeys = selectedRowKeys;

                //增加选择数据的处理
                selectedRows.forEach(row => {
                  if (!this.selectedRowsData.find(item => item.id === row.id) ) {
                    this.selectedRowsData.push(row);
                  }
                });
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
              },
              getCheckboxProps: record => ({
                props: {
                  disabled: false,
                  name: record.name,
                },
              }),
            };
          },
        },
    }
</script>

2.已选择数据列表

点击已选择数据，可以查看到所有选择的数据，可以点击取消按钮取消选择本条数据，并且在列表页刷新，取消选择的数据复选框置为可选

2.1列表

<div class="selectfFirmware" v-show="showSelectfFirmware">
    <div class="correlation-btn" v-for="(item,i) in selectedRowsData" :key="i">
        <span style="  display: inline-block;width: 100px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" :title="item.firmwareName">{{item.firmwareName}}</span>
		<!--删除按钮-->
        <a-icon type="close" @click="delItem(i)" />
    </div>
</div>

2.2相关属性以及方法

// 已选择固件列表展示
selectedFirmware(){
    this.showFirmwareList=false
    this.showSelectfFirmware=true
},

// 已选择固件删除
delItem(i){
    //this.selectedRows.splice(i,1)
    this.selectedRowKeys.splice(i,1)
    this.selectedRowsData.splice(i,1)
},

.correlation-btn{
  display: inline-block;
  border: solid 1px #e8e8e8;
  height: 30px;
  line-height: 30px;
  background-color: #fff;
  text-align: center;
  margin-right: 10px;
  padding: 0 5px 0;
}