分页 · Issue #ICRWJF · lunar landing/layui-vue

### 议题条件

- [x] 我确认已查阅：**http://www.layui-vue.com** ，但没有找到相关解决方案。
- [x] 我确认已在 **Issues** 中搜索过类似的问题，但没有找到相关解决方案。

### 版本号

2.23.3

### 浏览器

版本 138.0.7204.184（正式版本） （64 位）

### 问题类型

疑是 BUG

### 问题描述

table 分页使用disabled动态切换状态时选择每页大小会卡![输入图片说明](https://foruda.gitee.com/images/1754559856788454479/fec0f573_8104842.png "屏幕截图")

### 演示地址

https://layui-vue.github.io/layui-vue-playground/#eyJzcmMvQXBwLnZ1ZSI6Ijx0ZW1wbGF0ZT5cbjxkaXYgc3R5bGU9XCJoZWlnaHQ6IDgwMHB4O1wiPlxuIDxsYXktdGFibGUgXG4gICAgICA6cGFnZT1cInBhZ2VcIiBcbiAgICAgIDpyZXNpemU9XCJ0cnVlXCJcbiAgICAgIDpoZWlnaHQ9XCInMTAwJSdcIlxuICAgICAgOmNvbHVtbnM9XCJjb2x1bW5zXCIgXG4gICAgICA6bG9hZGluZz1cImxvYWRpbmdcIlxuICAgICAgOmRlZmF1bHQtdG9vbGJhcj1cInRydWVcIlxuICAgICAgOmRhdGEtc291cmNlPVwiZGF0YVNvdXJjZVwiIFxuICAgICAgdi1tb2RlbDpzZWxlY3RlZC1rZXlzPVwic2VsZWN0ZWRLZXlzXCIgIFxuICAgICAgQGNoYW5nZT1cImNoYW5nZVwiXG4gICAgICBAc29ydENoYW5nZT1cInNvcnRDaGFuZ2VcIj5cbiAgICA8dGVtcGxhdGUgI3N0YXR1cz1cInsgcm93IH1cIj5cbiAgICAgIDxsYXktc3dpdGNoIDptb2RlbC12YWx1ZT1cInJvdy5zdGF0dXNcIiBAY2hhbmdlPVwiY2hhbmdlU3RhdHVzKCRldmVudCAsIHJvdylcIj48L2xheS1zd2l0Y2g+XG4gICAgPC90ZW1wbGF0ZT5cbiAgICA8dGVtcGxhdGUgdi1zbG90OnRvb2xiYXI+XG4gICAgICA8bGF5LWJ1dHRvbiBzaXplPVwic21cIiB0eXBlPVwicHJpbWFyeVwiPuaWsOWinjwvbGF5LWJ1dHRvbj5cbiAgICAgIDxsYXktYnV0dG9uIHNpemU9XCJzbVwiIEBjbGljaz1cInJlbW92ZVwiPuWIoOmZpDwvbGF5LWJ1dHRvbj5cbiAgICA8L3RlbXBsYXRlPlxuICAgIDx0ZW1wbGF0ZSB2LXNsb3Q6b3BlcmF0b3I9XCJ7IHJvdyB9XCI+XG4gICAgICA8bGF5LWJ1dHRvbiBzaXplPVwieHNcIiB0eXBlPVwicHJpbWFyeVwiPue8lui+kTwvbGF5LWJ1dHRvbj5cbiAgICAgIDxsYXktYnV0dG9uIHNpemU9XCJ4c1wiPuafpeecizwvbGF5LWJ1dHRvbj5cbiAgICA8L3RlbXBsYXRlPlxuICA8L2xheS10YWJsZT5cbjwvZGl2PlxuPC90ZW1wbGF0ZT5cblxuPHNjcmlwdCBzZXR1cD5cbmltcG9ydCB7IHJlZiwgd2F0Y2gsIHJlYWN0aXZlIH0gZnJvbSAndnVlJztcbmltcG9ydCB7IGxheWVyIH0gZnJvbSAnQGxheXVpL2xheXVpLXZ1ZSc7XG5cbmNvbnN0IGxvYWRpbmcgPSByZWYoZmFsc2UpO1xuXG5jb25zdCBzZWxlY3RlZEtleXMgPSByZWYoW10pO1xuXG5jb25zdCBwYWdlID0gcmVhY3RpdmUoeyBjdXJyZW50OiAxLCBsaW1pdDogMTAsIHRvdGFsOiAxMDAsIGRpc2FibGVkOiBmYWxzZSB9KTtcblxuY29uc3QgY29sdW1ucyA9IHJlZihbXG4gIHsgdGl0bGU6XCLpgInpoblcIiwgd2lkdGg6IFwiNTVweFwiLCB0eXBlOiBcImNoZWNrYm94XCIsIGZpeGVkOiBcImxlZnRcIiB9LFxuICB7IHRpdGxlOlwi57yW5Y+3XCIsIHdpZHRoOiBcIjgwcHhcIiwga2V5OlwiaWRcIiwgZml4ZWQ6IFwibGVmdFwiLCBzb3J0OiB0cnVlIH0sXG4gIHsgdGl0bGU6XCLlp5PlkI1cIiwgd2lkdGg6IFwiODBweFwiLCBrZXk6XCJuYW1lXCIsIHNvcnQ6IHRydWUgfSxcbiAgeyB0aXRsZTpcIueKtuaAgVwiLCB3aWR0aDogXCIxODBweFwiLCBrZXk6XCJzdGF0dXNcIiwgY3VzdG9tU2xvdDogXCJzdGF0dXNcIn0sXG4gIHsgdGl0bGU6XCLpgq7nrrFcIiwgd2lkdGg6IFwiMTIwcHhcIiwga2V5OlwiZW1haWxcIiB9LFxuICB7IHRpdGxlOlwi5oCn5YirXCIsIHdpZHRoOiBcIjgwcHhcIiwga2V5Olwic2V4XCIgfSxcbiAgeyB0aXRsZTpcIuW5tOm+hFwiLCB3aWR0aDogXCI4MHB4XCIsIGtleTpcImFnZVwiLCB0b3RhbFJvdzogdHJ1ZX0sXG4gIHsgdGl0bGU6XCLln47luIJcIiwgd2lkdGg6IFwiMTIwcHhcIiwga2V5OlwiY2l0eVwiIH0sXG4gIHsgdGl0bGU6XCLnrb7lkI1cIiwgd2lkdGg6IFwiMjYwcHhcIiwga2V5OlwicmVtYXJrXCIgfSxcbiAgeyB0aXRsZTpcIumakOiXj1wiLCB3aWR0aDogXCIyNjBweFwiLCBrZXk6XCJoaWRlXCIsIGhpZGU6IHRydWUsIHRvdGFsUm93OiBcIuiHquWumuS5iVwiIH0sXG4gIHsgdGl0bGU6XCLml7bpl7RcIiwgd2lkdGg6IFwiMTIwcHhcIiwga2V5Olwiam9pblRpbWVcIn0sXG4gIHsgdGl0bGU6XCLmk43kvZxcIiwgd2lkdGg6IFwiMTUwcHhcIiwgY3VzdG9tU2xvdDpcIm9wZXJhdG9yXCIsIGtleTpcIm9wZXJhdG9yXCIsIGZpeGVkOiBcInJpZ2h0XCIsIGlnbm9yZUV4cG9ydDogdHJ1ZSB9XG5dKTtcblxuY29uc3QgY2hhbmdlID0gKHBhZ2VWYSkgPT4ge1xuICBsb2FkaW5nLnZhbHVlID0gdHJ1ZTtcbiAgcGFnZS5kaXNhYmxlZD10cnVlXG4gIHNldFRpbWVvdXQoKCkgPT4ge1xuICAgIGRhdGFTb3VyY2UudmFsdWUgPSBsb2FkRGF0YVNvdXJjZShwYWdlVmEuY3VycmVudCwgcGFnZVZhLmxpbWl0KTtcbiAgICBsb2FkaW5nLnZhbHVlID0gZmFsc2U7XG4gICAgICBwYWdlLmRpc2FibGVkPWZhbHNlXG4gIH0sIDEwMDApO1xufVxuXG5jb25zdCBzb3J0Q2hhbmdlID0gKGtleSwgc29ydCkgPT4ge1xuICBsYXllci5tc2coYOWtl+autSR7a2V5fSAtIOaOkuW6jyR7c29ydH0sIOS9oOWPr+S7peWIqeeUqCBzb3J0LWNoYW5nZSDlrp7njrDmnI3liqHnq6/mjpLluo9gKVxufVxuXG5jb25zdCBkYXRhU291cmNlID0gcmVmKFtcbiAge2lkOlwiMVwiLCBuYW1lOlwi5byg5LiJMVwiLCBlbWFpbDogXCJ0ZXN0QHFxLmNvbVwiLCBzZXg6IFwi55S3XCIsIGNpdHk6IFwi5rWZ5rGf5p2t5beeXCIsIGFnZTpcIjE4XCIscmVtYXJrOiAn6Iqx5byA5aCq5oqY55u06aG75oqYLOiOq+W+heaXoOiKseepuuaKmOaenS4nLCBqb2luVGltZTogXCIyMDIyLTAyLTA5XCIsIHN0YXR1czogdHJ1ZX0sXG4gIHtpZDpcIjJcIiwgbmFtZTpcIuW8oOS4iTJcIiwgZW1haWw6IFwidGVzdEBxcS5jb21cIiwgc2V4OiBcIueUt1wiLCBjaXR5OiBcIua1meaxn+adreW3nlwiLCBhZ2U6XCIyMFwiLHJlbWFyazogJ+iKseW8gOWgquaKmOebtOmhu+aKmCzojqvlvoXml6DoirHnqbrmipjmnp0uJywgam9pblRpbWU6IFwiMjAyMi0wMi0wOVwiLCBzdGF0dXM6IHRydWV9LFxuICB7aWQ6XCIzXCIsIG5hbWU6XCLlvKDkuIkzXCIsIGVtYWlsOiBcInRlc3RAcXEuY29tXCIsIHNleDogXCLnlLdcIiwgY2l0eTogXCLmtZnmsZ/mna3lt55cIiwgYWdlOlwiMjBcIixyZW1hcms6ICfoirHlvIDloKrmipjnm7Tpobvmipgs6I6r5b6F5peg6Iqx56m65oqY5p6dLicsIGpvaW5UaW1lOiBcIjIwMjItMDItMDlcIiwgc3RhdHVzOiB0cnVlfSxcbiAge2lkOlwiNFwiLCBuYW1lOlwi5byg5LiJNFwiLCBlbWFpbDogXCJ0ZXN0QHFxLmNvbVwiLCBzZXg6IFwi55S3XCIsIGNpdHk6IFwi5rWZ5rGf5p2t5beeXCIsIGFnZTpcIjIwXCIscmVtYXJrOiAn6Iqx5byA5aCq5oqY55u06aG75oqYLOiOq+W+heaXoOiKseepuuaKmOaenS4nLCBqb2luVGltZTogXCIyMDIyLTAyLTA5XCIsIHN0YXR1czogdHJ1ZX0sXG4gIHtpZDpcIjVcIiwgbmFtZTpcIuW8oOS4iTVcIiwgZW1haWw6IFwidGVzdEBxcS5jb21cIiwgc2V4OiBcIueUt1wiLCBjaXR5OiBcIua1meaxn+adreW3nlwiLCBhZ2U6XCIyMFwiLHJlbWFyazogJ+iKseW8gOWgquaKmOebtOmhu+aKmCzojqvlvoXml6DoirHnqbrmipjmnp0uJywgam9pblRpbWU6IFwiMjAyMi0wMi0wOVwiLCBzdGF0dXM6IHRydWV9LFxuICB7aWQ6XCI2XCIsIG5hbWU6XCLlvKDkuIk2XCIsIGVtYWlsOiBcInRlc3RAcXEuY29tXCIsIHNleDogXCLnlLdcIiwgY2l0eTogXCLmtZnmsZ/mna3lt55cIiwgYWdlOlwiMjBcIixyZW1hcms6ICfoirHlvIDloKrmipjnm7Tpobvmipgs6I6r5b6F5peg6Iqx56m65oqY5p6dLicsIGpvaW5UaW1lOiBcIjIwMjItMDItMDlcIiwgc3RhdHVzOiB0cnVlfSxcbiAge2lkOlwiN1wiLCBuYW1lOlwi5byg5LiJN1wiLCBlbWFpbDogXCJ0ZXN0QHFxLmNvbVwiLCBzZXg6IFwi55S3XCIsIGNpdHk6IFwi5rWZ5rGf5p2t5beeXCIsIGFnZTpcIjE4XCIscmVtYXJrOiAn6Iqx5byA5aCq5oqY55u06aG75oqYLOiOq+W+heaXoOiKseepuuaKmOaenS4nLCBqb2luVGltZTogXCIyMDIyLTAyLTA5XCIsIHN0YXR1czogdHJ1ZX0sXG4gIHtpZDpcIjhcIiwgbmFtZTpcIuW8oOS4iThcIiwgZW1haWw6IFwidGVzdEBxcS5jb21cIiwgc2V4OiBcIueUt1wiLCBjaXR5OiBcIua1meaxn+adreW3nlwiLCBhZ2U6XCIyMFwiLHJlbWFyazogJ+iKseW8gOWgquaKmOebtOmhu+aKmCzojqvlvoXml6DoirHnqbrmipjmnp0uJywgam9pblRpbWU6IFwiMjAyMi0wMi0wOVwiLCBzdGF0dXM6IHRydWV9LFxuICB7aWQ6XCI5XCIsIG5hbWU6XCLlvKDkuIk5XCIsIGVtYWlsOiBcInRlc3RAcXEuY29tXCIsIHNleDogXCLnlLdcIiwgY2l0eTogXCLmtZnmsZ/mna3lt55cIiwgYWdlOlwiMjBcIixyZW1hcms6ICfoirHlvIDloKrmipjnm7Tpobvmipgs6I6r5b6F5peg6Iqx56m65oqY5p6dLicsIGpvaW5UaW1lOiBcIjIwMjItMDItMDlcIiwgc3RhdHVzOiB0cnVlfSxcbiAge2lkOlwiMTBcIiwgbmFtZTpcIuW8oOS4iTEwXCIsIGVtYWlsOiBcInRlc3RAcXEuY29tXCIsIHNleDogXCLnlLdcIiwgY2l0eTogXCLmtZnmsZ/mna3lt55cIiwgYWdlOlwiMjBcIixyZW1hcms6ICfoirHlvIDloKrmipjnm7Tpobvmipgs6I6r5b6F5peg6Iqx56m65oqY5p6dLicsIGpvaW5UaW1lOiBcIjIwMjItMDItMDlcIiwgc3RhdHVzOiB0cnVlfVxuXSlcblxuY29uc3QgY2hhbmdlU3RhdHVzID0gKGlzQ2hlY2tlZCwgcm93KSA9PiB7XG4gIGRhdGFTb3VyY2UudmFsdWUuZm9yRWFjaCgoaXRlbSkgPT4ge1xuICAgIGlmKGl0ZW0uaWQgPT09IHJvdy5pZCkge1xuICAgICAgbGF5ZXIubXNnKFwiU3VjY2Vzc1wiLCB7IGljb246IDEgfSwgKCkgPT4ge1xuICAgICAgICBpdGVtLnN0YXR1cyA9IGlzQ2hlY2tlZDtcbiAgICAgIH0pXG4gICAgfVxuICB9KVxufVxuXG5jb25zdCByZW1vdmUgPSAoKSA9PiB7XG4gIGxheWVyLm1zZyhzZWxlY3RlZEtleXMudmFsdWUsIHsgYXJlYTogJzUwJSd9KVxufVxuXG5jb25zdCBsb2FkRGF0YVNvdXJjZSA9IChwYWdlLCBwYWdlU2l6ZSkgPT4ge1xuICB2YXIgcmVzcG9uc2UgPSBbXTtcbiAgdmFyIHN0YXJ0SW5kZXggPSAoKHBhZ2UgLSAxKSAqIHBhZ2VTaXplKSArIDE7XG4gIHZhciBlbmRJbmRleCA9IHBhZ2UgKiBwYWdlU2l6ZTtcbiAgZm9yICh2YXIgaSA9IHN0YXJ0SW5kZXg7IGkgPD0gZW5kSW5kZXg7IGkrKykge1xuICAgICAgcmVzcG9uc2UucHVzaCh7XG4gICAgICAgIGlkOmAke2l9YCwgXG4gICAgICAgIGFnZTpcIjE4XCIsXG4gICAgICAgIHNleDogXCLnlLdcIiwgXG4gICAgICAgIG5hbWU6YOW8oOS4iSR7aX1gLCBcbiAgICAgICAgZW1haWw6IFwidGVzdEBxcS5jb21cIixcbiAgICAgICAgcmVtYXJrOiAn6Iqx5byA5aCq5oqY55u06aG75oqYLOiOq+W+heaXoOiKseepuuaKmOaenS4nLCAgXG4gICAgICAgIGpvaW5UaW1lOiBcIjIwMjItMDItMDlcIiwgXG4gICAgICAgIGNpdHk6IFwi5rWZ5rGf5p2t5beeXCIsIFxuICAgICAgICBzdGF0dXM6IHRydWVcbiAgICAgIH0pXG4gIH1cbiAgcmV0dXJuIHJlc3BvbnNlO1xufVxuPC9zY3JpcHQ+XG4iLCJpbXBvcnQtbWFwLmpzb24iOiJ7XG4gIFwiaW1wb3J0c1wiOiB7fVxufSIsInRzY29uZmlnLmpzb24iOiJ7XG4gIFwiY29tcGlsZXJPcHRpb25zXCI6IHtcbiAgICBcInRhcmdldFwiOiBcIkVTTmV4dFwiLFxuICAgIFwianN4XCI6IFwicHJlc2VydmVcIixcbiAgICBcIm1vZHVsZVwiOiBcIkVTTmV4dFwiLFxuICAgIFwibW9kdWxlUmVzb2x1dGlvblwiOiBcIk5vZGVcIixcbiAgICBcInR5cGVzXCI6IFtcIkBsYXl1aS9sYXl1aS12dWUvdHlwZXMvY29tcG9uZW50cy5kLnRzXCJdLFxuICAgIFwiYWxsb3dJbXBvcnRpbmdUc0V4dGVuc2lvbnNcIjogdHJ1ZSxcbiAgICBcImFsbG93SnNcIjogdHJ1ZSxcbiAgICBcImNoZWNrSnNcIjogdHJ1ZVxuICB9LFxuICBcInZ1ZUNvbXBpbGVyT3B0aW9uc1wiOiB7XG4gICAgXCJ0YXJnZXRcIjogMy4zXG4gIH1cbn1cbiIsIl9vIjp7fX0=

### 业务代码

```auto
<template>
<div style="height: 800px;">
 <lay-table 
      :page="page" 
      :resize="true"
      :height="'100%'"
      :columns="columns" 
      :loading="loading"
      :default-toolbar="true"
      :data-source="dataSource" 
      v-model:selected-keys="selectedKeys"  
      @change="change"
      @sortChange="sortChange">
    <template #status="{ row }">
      <lay-switch :model-value="row.status" @change="changeStatus($event , row)"></lay-switch>
    </template>
    <template v-slot:toolbar>
      <lay-button size="sm" type="primary">新增</lay-button>
      <lay-button size="sm" @click="remove">删除</lay-button>
    </template>
    <template v-slot:operator="{ row }">
      <lay-button size="xs" type="primary">编辑</lay-button>
      <lay-button size="xs">查看</lay-button>
    </template>
  </lay-table>
</div>
</template>

const loading = ref(false);

const selectedKeys = ref([]);

const page = reactive({ current: 1, limit: 10, total: 100, disabled: false });

const columns = ref([
  { title:"选项", width: "55px", type: "checkbox", fixed: "left" },
  { title:"编号", width: "80px", key:"id", fixed: "left", sort: true },
  { title:"姓名", width: "80px", key:"name", sort: true },
  { title:"状态", width: "180px", key:"status", customSlot: "status"},
  { title:"邮箱", width: "120px", key:"email" },
  { title:"性别", width: "80px", key:"sex" },
  { title:"年龄", width: "80px", key:"age", totalRow: true},
  { title:"城市", width: "120px", key:"city" },
  { title:"签名", width: "260px", key:"remark" },
  { title:"隐藏", width: "260px", key:"hide", hide: true, totalRow: "自定义" },
  { title:"时间", width: "120px", key:"joinTime"},
  { title:"操作", width: "150px", customSlot:"operator", key:"operator", fixed: "right", ignoreExport: true }
]);

const change = (pageVa) => {
  loading.value = true;
  page.disabled=true
  setTimeout(() => {
    dataSource.value = loadDataSource(pageVa.current, pageVa.limit);
    loading.value = false;
      page.disabled=false
  }, 1000);
}

const sortChange = (key, sort) => {
  layer.msg(`字段${key} - 排序${sort}, 你可以利用 sort-change 实现服务端排序`)
}

const dataSource = ref([
  {id:"1", name:"张三1", email: "test@qq.com", sex: "男", city: "浙江杭州", age:"18",remark: '花开堪折直须折,莫待无花空折枝.', joinTime: "2022-02-09", status: true},
  {id:"2", name:"张三2", email: "test@qq.com", sex: "男", city: "浙江杭州", age:"20",remark: '花开堪折直须折,莫待无花空折枝.', joinTime: "2022-02-09", status: true},
  {id:"3", name:"张三3", email: "test@qq.com", sex: "男", city: "浙江杭州", age:"20",remark: '花开堪折直须折,莫待无花空折枝.', joinTime: "2022-02-09", status: true},
  {id:"4", name:"张三4", email: "test@qq.com", sex: "男", city: "浙江杭州", age:"20",remark: '花开堪折直须折,莫待无花空折枝.', joinTime: "2022-02-09", status: true},
  {id:"5", name:"张三5", email: "test@qq.com", sex: "男", city: "浙江杭州", age:"20",remark: '花开堪折直须折,莫待无花空折枝.', joinTime: "2022-02-09", status: true},
  {id:"6", name:"张三6", email: "test@qq.com", sex: "男", city: "浙江杭州", age:"20",remark: '花开堪折直须折,莫待无花空折枝.', joinTime: "2022-02-09", status: true},
  {id:"7", name:"张三7", email: "test@qq.com", sex: "男", city: "浙江杭州", age:"18",remark: '花开堪折直须折,莫待无花空折枝.', joinTime: "2022-02-09", status: true},
  {id:"8", name:"张三8", email: "test@qq.com", sex: "男", city: "浙江杭州", age:"20",remark: '花开堪折直须折,莫待无花空折枝.', joinTime: "2022-02-09", status: true},
  {id:"9", name:"张三9", email: "test@qq.com", sex: "男", city: "浙江杭州", age:"20",remark: '花开堪折直须折,莫待无花空折枝.', joinTime: "2022-02-09", status: true},
  {id:"10", name:"张三10", email: "test@qq.com", sex: "男", city: "浙江杭州", age:"20",remark: '花开堪折直须折,莫待无花空折枝.', joinTime: "2022-02-09", status: true}
])

const changeStatus = (isChecked, row) => {
  dataSource.value.forEach((item) => {
    if(item.id === row.id) {
      layer.msg("Success", { icon: 1 }, () => {
        item.status = isChecked;
      })
    }
  })
}

const remove = () => {
  layer.msg(selectedKeys.value, { area: '50%'})
}

```

### 截图补充

### 友好承诺

- [x] 我承诺将本着相互尊重、理解和友善的态度进行交流，维护 layui-vue 良好的社区氛围。

lunar landing/layui-vue

内容风险标识

分页

评论 (0)

lunar landing/layui-vue .gitee-modal { width: 500px !important; }

内容风险标识

分页

评论 (0)

搜索帮助

lunar landing/layui-vue