element-Plus 中table复选框勾选-跨页数据保存选中状态(跨页进行分页勾选)/复选框禁点 ，实现分页切换将选中数据回显

      

          <el-dialog
         v-model="dialogOptionalVisible"
         title="医选列表"
         width="60%"
         @close="handleOptionalsClose"
         >

           <el-table
              v-loading="loading"
              :data="tablequeryCustomerItem"
              border
              height="600"
              :header-cell-style="{
                backgroundImage: 'linear-gradient(176deg,#accbee ,#e7f0fd 100%)',
                color: '#000',
              }"
              style="width: 100%"
              row-key="id"
              @selection-change="handleSelectiontoChange"
              ref="multipletoTable"
            >
              <el-table-column
                type="selection"
                :reserve-selection="true"
                width="55"
                :selectable="isSelectable"
              ></el-table-column>
              <el-table-column
                prop="bookTime"
                label="预约时间"
                align="center"
                width="110"
                show-overflow-tooltip
              >

1. ---

   跨页面保存选中状态 :reserve-selection="true"  

   el-table 中 绑定 row-key="id"    绑定ref

// 勾选数据
    handleSelectiontoChange(selection) {
      console.log('🚀 ~ 全选', selection);
      if (selection) {
        this.orderSelectionData = selection; // 保存选中的数据
        this.orderSelectionKeys = selection.map(item => item.optionalItemCode); // 选中的 code
      }
    },

清空数值 

   // 医选-关闭
    handleOptionalsClose() {
      this.dialogOptionalVisible = false; //医选弹框
      this.orderSelectionKeys = [];
      this.optionalsData = [];
      this.orderItemCode = '';
      this.$refs.multipletoTable.clearSelection();
    },

  //禁点
   isSelectable(row, index) {
      const item = row || {};
      if (item.bookStatus === 1 || item.refundStatus !== 0 || item.buttonStatus === 10) {
        return false;
      }
      return true;
    },

• 需要注意：
• 1.row-key="id"  绑定Id;
• 2.ref="multipletoTable"  绑定ref;
• 3.type="selection" :reserve-selection="true"  用于跨页保存选中;
• 4.打印selection，选中的数组为this.orderSelectionData;
• 5.选中的id，放在this.orderSelectionKeys.
• 6.el-dialog 绑定close ，关闭弹框时,清空table的选中值