AntDesignVue中的表格Table清空选中项的选中状态

表格选中后进行一些操作，然后刷新表格，发现上一次选中的行的选中状态还在，但是之前的选中状态要清空才符合需求，解决的思路是给table绑定一个动态值key，只要key值改变了表格就会整体重新渲染，在data里面定义一个变量，初始值可以设为1，每次操作成功后给这个值+1就可以了。主要代码如下：

 

部分源代码：

<template>
  <div>
    <!-- 查询区域 -->
    <a-form layout="inline">
      <a-form-item label="时间" style="padding:10px 5px;">
          <a-range-picker @change="onChangeTime"  v-model="queryParam.rangeTime" :valueFormat="dateFormat" style="width:250px;"/>
      </a-form-item>
      <a-form-item label="项目" style="padding:10px 5px;">
          <a-select  v-model="queryParam.id" :allowClear=true placeholder="请选择" show-search style="width:200px;">
            <a-select-option :value="item.id" v-for="(item,index) in xiangmuList" :key="index">
              {{item.payName}}
            </a-select-option>
          </a-select>
      </a-form-item>
      <a-form-item label="" style="padding:10px 5px;">
        <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
      </a-form-item>
    </a-form>
    
    <!-- 查询区域-END -->
    <div class="tabletop-caozuo">
      <a-button type="primary" ghost icon="account-book" @click="onDuizhang">对账</a-button>
    </div>
    <!-- 列表 -->
    <a-table bordered :data-source="tableSource" :columns="columns" :pagination="false"
    :row-selection="rowSelection" :loading="tableloading" :scroll="{x:'max-content',y: 600}" size="middle"
    :key="'key'+tablekeynum">
      <!-- <template slot="operation" slot-scope="text, record">
        <a-tag color="green" v-if="record.status==1">已匹配</a-tag>
        <a-tag color="blue" v-else>已核销</a-tag>
      </template> -->
      <template slot="operation" slot-scope="text, record">
        <a-popconfirm
          title="确定取消匹配吗?"
          @confirm="() => onQuxiaoPipei(record.id)"
        >
          <a href="javascript:;">取消匹配</a>
        </a-popconfirm>
      </template>
    </a-table>
    <!-- 弹窗 -->
    <!-- :confirm-loading="confirmLoading"
    :bodyStyle="{ height: '600px' }"
      @ok="handleOk"
      @cancel="handleCancel" -->
    <a-modal
      title="对账"
      :visible="modalVisible"
      :footer="null"
      @cancel="modalCancel"
      :width="1200"
      :bodyStyle="{ padding: '0 20px 20px' }"
    >
      <div class="modal-box">
        <a-form layout="inline">
          <a-form-item label="项目" style="padding:5px 5px;">
              <a-select  v-model="modalQuery.EstateID"  placeholder="请选择" show-search style="width:150px;" @change="xiangmuChange">
                <a-select-option :value="item.EstateID" v-for="(item,index) in modalXiangmuList" :key="index">
                  {{item.Caption}}
                </a-select-option>
              </a-select>
          </a-form-item>
          <a-form-item label="楼栋" style="padding:5px 5px;">
              <a-select  v-model="modalQuery.buildingId"  placeholder="请选择" show-search style="width:150px;" @change="buildingChange">
                <a-select-option :value="item.buildingid" v-for="(item,index) in buildingList" :key="index">
                  {{item.buildingno}}
                </a-select-option>
              </a-select>
          </a-form-item>
         
          <a-form-item label="房间" style="padding:5px 5px;">
              <a-select v-model="modalQuery.roomId" placeholder="请选择" show-search style="width:150px;" @change="roomChange">
                <a-select-option :value="item.RmID" v-for="(item,index) in roomList" :key="index">
                  {{item.RmNo}}
                </a-select-option>
              </a-select>
          </a-form-item>
          <a-form-item label="姓名" style="padding:5px 5px;">
              <a-input placeholder="请输入业主" v-model="modalQuery.name" style="width:100px;"></a-input>
          </a-form-item>
          <!-- <a-form-item label="房间号" style="padding:5px 5px;">
              <a-input placeholder="请输入房间号" v-model="modalQuery.roomname" style="width:150px;"></a-input>
          </a-form-item> -->
          <a-form-item style="padding:5px 5px;">
            <a-button type="primary" @click="onModalQuery" icon="search">查询</a-button>
          </a-form-item>
         
        </a-form>
        <div class="tabletop-caozuo">
          <a-button type="primary" ghost icon="account-book" @click="onPipei" :loading="pipeiloading">匹配</a-button>
        </div>
        <!-- 列表 -->
        <!-- <a-table bordered :data-source="tableSource2" :columns="columns2" :pagination="pagination2" @change="handleTableChange2"
        :row-selection="rowSelection2" :scroll="{ y: 400 }" size="small" :loading="modaltableloading"> -->
        <a-table bordered :data-source="tableSource2" :columns="columns2" :pagination="false" @change="handleTableChange2"
        :row-selection="rowSelection2" :scroll="{x:'max-content', y: 400 }" size="small" :loading="modaltableloading">
        </a-table>

      </div>
    </a-modal>
    

  </div>
</template>
<script>
import {wyTransactionList3,getCompanyPay,list1getEstate,getBuliding,getUnit,getRoom,getBillItem,bindingBillItem,removeBinding} from "@api/yizhifu"
  export default {
    name: 'YiJiaoFei3',
    data () {
      return {
          tablekeynum:1,//为了在匹配成功后重新渲染列表，去掉之前选中的行的选中状态
          pipeiloading:false,//匹配按钮的加载效果
          modaltableloading:false,//弹窗内table加载中效果，默认没有加载中
          modalXiangmuList:[],//弹窗内的项目下拉列表
          buildingList:[],//楼栋列表
          unitList:[],//单元列表---后来没有了
          roomList:[],//房间列表
          modalQuery:{
            EstateID:null,//小区id
            buildingId:null,//楼栋id
            // unitId:null,//单元id
            roomId:null,//房间id
            name:"",//业主
            // roomname:null,//房间号
         },//弹窗内的查询对象
          modalVisible:false,//默认弹窗关闭
          // dateFormat: 'YYYY-MM-DD',//日期范围获取的值格式化
          dateFormat: 'YYYYMMDD',//日期范围获取的值格式化
          queryParam:{
            rangeTime:null,//时间范围
            id:"",//项目

          },//查询对象
          xiangmuList:[
            // {id:1,name:"下拉选项1"},
            // {id:2,name:"下拉选项2"},
          ],//下拉选项数据源-项目列表
          tableSource:[
            // {id:1,name:'张三'},
            // {id:2,name:'李四'},

          ],//表格数据源
          
          columns:[
            {
              title: '转账人',
              dataIndex: 'oppAcname',
              align:"center",
              width: 100,
            },
            {
              title: '银行账户',
              dataIndex: 'oppAcno',
              align:"center",
              width: 140,
            },
            {
              title: '账号开户行名',
              dataIndex: 'oppBankname',
              align:"center",
              width: 150,
            },
            {
              title: '交易时间',
              dataIndex: 'acdtTime',
              align:"center",
              width: 160,
            },
            {
              title: '转账金额',
              dataIndex: 'amt',
              align:"center",
              width: 100,
            },
            {
              title: '转账备注',
              dataIndex: 'postscript',
              align:"center",
              width: 300,
            },
            {
              title: '对应应收款',
              dataIndex: 'billItem',
              align:"center",
              width: 600,
            },
            {
              title: '操作',
              dataIndex: 'operation',
              scopedSlots: { customRender: 'operation' },
              align:"center",
              fixed: 'right',
              width: 200,
            },
          ],//表格每一列
          selectedRowKeys:[],//选中的行在表格数据源的下标值集合
          selectedRows:[],//选中的行的对象集合
          //弹窗内的对象
          tableSource2:[
            // {id:1,name:'张三'},
            // {id:2,name:'李四'},
          ],//弹窗内表格数据源
          
          columns2:[
            {
              title: '业户',
              dataIndex: 'OwnerName',
              align:"center",
              width:100,
            },
            {
              title: '项目名称',
              dataIndex: 'ItemName',
              align:"center",
              width:150,
            },
            {
              title: '收费单价',
              dataIndex: 'UnitPrice',
              align:"center",
              width:100,
            },
            {
              title: '收费起始时间',
              dataIndex: 'StartTime',
              align:"center",
              width:150,
            },
            {
              title: '收费结束时间',
              dataIndex: 'EndTime',
              align:"center",
              width:150,
            },
            {
              title: '已交金额',
              dataIndex: 'PayedAmount',
              align:"center",
               width:100,
            },
            {
              title: '欠费金额',
              dataIndex: 'ActualAmount',
              align:"center",
               width:100,
            },
            {
              title: '所属期间',
              dataIndex: 'MMONTH',
              align:"center",
               width:100,
            },
            {
              title: '说明',
              dataIndex: 'spec',
              align:"center",
               width:160,
            },
            {
              title: '创建者',
              dataIndex: 'Creator',
              align:"center",
              width:160,
            },
          ],//弹窗内表格每一列
          selectedRowKeys2:[],//弹窗内选中的行在表格数据源的下标值集合
          selectedRows2:[],//弹窗内选中的行的对象集合
          tableloading:false,//table加载中效果，默认没有加载中


      }
    },
    created() {
      // this.getList();//获取列表
      this.getxiangmu();//获取项目下拉选择列表
      this.getmodalxiangmu();//获取弹窗内项目下拉选择列表
    },
    computed: {
      //表格的列选择发生改变
      rowSelection() {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            this.selectedRowKeys=selectedRowKeys;//选中的行在表格数据源的下标值集合
            this.selectedRows=selectedRows;//选中的行的对象集合
          },
          getCheckboxProps: record => ({
            props: {
              disabled: record.trState!=0, // Column configuration not to be checked,trState为0事可选，不为0时不可选
              trState: record.trState,
            },
          }),
        };
      },
      //弹窗内表格的列选择发生改变
      rowSelection2() {
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            this.selectedRowKeys2=selectedRowKeys;//选中的行在表格数据源的下标值集合
            this.selectedRows2=selectedRows;//选中的行的对象集合
          },
          
        };
      },
    },
    methods: {
      //列表中操作栏的“取消匹配”按钮点击
      onQuxiaoPipei(id){
        let obj='id='+id;
        console.log("13-取消匹配传参obj",obj);
        
        removeBinding(obj).then(res=>{
            console.log("13-返回res：",res)
            if(res.code==200){
              this.getList();//刷新列表
              
            }else{
              this.$message.error(res.message);//错误提示
            }

        })
      },
      //弹窗内的匹配按钮点击事件
      onPipei(){
        let keys=this.selectedRowKeys2;//选中的行在表格数据源的下标值集合
        let rows=this.selectedRows2;//选中的行的对象集合
        console.log("keys",keys)
        console.log("rows",rows)
        if(rows.length==0){
          this.$message.warning('请先选中应收款');
          return;
        }
        // console.log("页面上的选中的数组集合this.selectedRows",this.selectedRows)
        // console.log("弹窗内选中的数组集合rows",rows);

        let obj={
          transaction:this.selectedRows,//列表
          billItem:rows,//弹窗
        }
        console.log("12-匹配传参obj",obj);
        this.pipeiloading=true;//匹配按钮的加载效果
        bindingBillItem(obj).then(res=>{
            console.log("12-弹窗内匹配返回res：",res)
            this.pipeiloading=false;//关闭加载中效果
            if(res.code==200){
              this.$message.success('匹配成功');
              this.tablekeynum++;
              console.log("this.tablekeynum",this.tablekeynum);
              this.tableSource=[]; // 清空表格数据
              this.getList();//调用查询列表方法，更新列表数据，此时对应应收款一列之前选中的数据发生了改变
          
              this.tableSource2=[]; // 清空弹窗内的表格数据
              this.modalQuery={}; // 清空弹窗内的查询对象，
              this.selectedRows=[]; //之前列表选中的行清空
              this.selectedRowKeys=[];//之前选中的行在表格数据源的下标值集合清空

              this.modalVisible=false;//最后关闭弹窗
              
            }else{
              this.$message.error(res.message);//错误提示
            }

        })

      },
      //弹窗内的查询按钮点击事件
      onModalQuery(){
        console.log("弹窗内的查询对象modalQuery",this.modalQuery);
        if(this.modalQuery.EstateID==null){
          this.$message.warning('请选择项目');
          return;
        }
        if(this.modalQuery.buildingId==null){
          this.$message.warning('请选择楼栋');
          return;
        }
        this.getBillItemList();//获取弹窗内的列表

      },
      //获取弹窗内的列表
      getBillItemList(){
        console.log("弹窗内的查询对象modalQuery",this.modalQuery);

        let obj='bulidingId='+this.modalQuery.buildingId+'&roomId='+this.modalQuery.roomId+'&name='+this.modalQuery.name;
        console.log("11-传参obj",obj);
        this.modaltableloading=true;//显示表格加载中效果
        getBillItem(obj).then(res=>{
            console.log("11-获取弹窗内列表res：",res)
            this.modaltableloading=false;//关闭表格加载中效果
            if(res.code==200){
              this.tableSource2=res.result;//表格数据源赋值
              
            }else{
              this.$message.error(res.message);//错误提示
            }

        })
      },
      
     
      //弹窗内的楼栋发生改变事件
      buildingChange(value){
        console.log("弹窗内楼栋改变回调值value",value);
        let obj='buildingId='+value;
        console.log("5-传参obj",obj);
        getRoom(obj).then(res=>{
            console.log("6-获取房间列表res：",res)
           
            if(res.code==200){
              this.roomList=res.result;//表格数据源赋值
              this.modalQuery.roomId=null;//上一次选择的房间id清空
              
            }else{
              this.$message.error(res.message);//错误提示
            }

        })
       
      },
      //弹窗内的项目发生改变事件
      xiangmuChange(value){
        console.log("弹窗内项目改变回调值value",value);
        let obj='estateID='+value;
        console.log("4-传参obj",obj);
        
        getBuliding(obj).then(res=>{
            console.log("4-获取楼栋列表res：",res)
           
            if(res.code==200){
              this.buildingList=res.result;//表格数据源赋值
              this.modalQuery.buildingId=null;//上一次选择的楼栋id清空
              this.modalQuery.unitId=null;//上一次选择的单元id清空
              this.modalQuery.roomId=null;//上一次选择的房间id清空
              
            }else{
              this.$message.error(res.message);//错误提示
            }

        })

      },
      //获取弹窗内项目下拉选择列表
      getmodalxiangmu(){
        list1getEstate().then(res=>{
            console.log("3-获取弹窗内项目下拉选择列表res：",res)
            if(res.code==200){
              this.modalXiangmuList=res.result;//下拉列表赋值
            }
        })
      },
      //搜索方法
      searchQuery(){
        console.log("搜索对象queryParam",this.queryParam);
        let rangetime=this.queryParam.rangeTime;//时间范围
        console.log("rangetime",rangetime)
        let id=this.queryParam.id;//项目选择的在数组中的下标值
        if(rangetime==null||rangetime==""){
          this.$message.warning('请选择时间');
          return;
        }

        if(id==""){
          this.$message.warning('请选择项目');
          return;
        }
        
        this.getList();//调用查询列表方法

      },
      //获取项目下拉选择列表
      getxiangmu(){
        getCompanyPay().then(res=>{
            console.log("2-获取项目下拉选择列表res：",res)
            this.xiangmuList=res;//下拉列表赋值

        })
      },
     
      //弹窗的取消按钮点击
      modalCancel(){
        this.modalVisible=false;//关闭弹窗
      },
      //对账按钮点击
      onDuizhang(){
        let keys=this.selectedRowKeys;//选中的行在表格数据源的下标值集合
        let rows=this.selectedRows;//选中的行的对象集合
        console.log("keys",keys)
        console.log("rows",rows)
        //这个判断暂时去掉，为了测试弹窗的数据！！！！！！！！！
        if(rows.length==0){
          this.$message.warning('请先选中银行流水');
          return;
        }
        this.modalVisible=true;//出现弹窗
        this.modalQuery.EstateID=null;//弹窗内搜索区域之前选择的值清空
        this.modalQuery.buildingId=null;
        this.modalQuery.unitId=null;
        this.modalQuery.roomId=null;
        this.modalQuery.ownername=null;
        this.modalQuery.roomname=null;

      },
      
      //获取列表
      getList(){
        console.log("搜索对象queryParam",this.queryParam);
        let rangetime=this.queryParam.rangeTime;//时间范围
        console.log("rangetime",rangetime)
        let id=this.queryParam.id;//项目选择的在数组中的下标值

        // let obj={
        //   startDate: rangetime[0], 
        //   endDate:rangetime[1], 
        //   id:id,
        // }
        let obj='startDate='+rangetime[0]+'&endDate='+rangetime[1]+'&id='+id;
        console.log("1-传参obj",obj);
        this.tableloading=true;//显示表格加载中效果
        wyTransactionList3(obj).then(res=>{
            console.log("1-获取列表res：",res)
            this.tableloading=false;//关闭表格加载中效果
            if(res.code==200){
              this.tableSource=res.result;//表格数据源赋值
              
            }else{
              this.$message.error(res.message);//错误提示
            }

            // this.pagination.total = res.total;//分页的总条数赋值

        })
      },
      
      
    }
  }
</script>
<style scoped>
.tabletop-caozuo{
  box-sizing: border-box;
  padding:0 10px 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
 }

</style>