useTable出现卡死导致浏览器崩溃

[yanduhantan1991]

使用台式机没有发现这个问题，这是别人在使用笔记本电脑时发现的，使用useTable时会出现卡死状况，我测试了一下，7条数据可以，八条数据的时候就卡死了，我还没找到问题原因，大神给些提示，谢谢

[anncwb]

Hello @yanduhantan1991. Please provide the complete reproduction steps and code. Issues labeled by need reproduction will be closed if no activities in 3 days.

[yanduhantan1991]

批量删除 新增用户 <script lang="ts"> import { defineComponent, ref, nextTick, watch, inject } from 'vue';

import { BasicTable, useTable, TableAction } from '/@/components/Table';
import { getUserList, deleteUser, resetPassword } from './api/index';
import { PageWrapper } from '/@/components/Page';

import { useModal } from '/@/components/Modal';
import UserModal from './userModal.vue';

import { columns, searchFormSchema } from './user.data';
import { screenConFirm, getObjectArrayByKey } from '/@/utils/baseCommon';
import { usePermission } from '/@/hooks/web/usePermission';
export default defineComponent({
name: 'UserManagement',
components: { BasicTable, PageWrapper, UserModal, TableAction },
// props:['roleId','departId'],
setup() {
const { hasPermission } = usePermission();
const [registerModal, { openModal }] = useModal();
const userModelRef = ref();
const roleId: any = inject('roleId');
const departId: any = inject('departId');
const [registerTable, { reload }] = useTable({
title: '用户列表',
api: getUserList,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
},
useSearchForm: true,
showTableSetting: true,
beforeFetch: handlePageClick,
handleSearchInfoFn: handleParm,
bordered: true,
actionColumn: {
width: 180,
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
},
});

  function handleParm(param) {
    if (roleId != undefined) {
      param.roleId = roleId.value ? roleId.value : null;
    }
    if (departId != undefined) {
      param.departId = departId.value ? departId.value : null;
    }
  }
  function handlePageClick(param) {
    if (roleId != undefined) {
      param.roleId = roleId.value ? roleId.value : null;
    }
    if (departId != undefined) {
      param.departId = departId.value ? departId.value : null;
    }
  }

  const selectedKeys: any = ref([]);
  async function deleteMoreConfirm() {
    const params = getObjectArrayByKey('id', selectedKeys.value);
    let data = {
      fun: deleteMore,
      params: params,
      content: '确认执行删除吗？',
    };
    screenConFirm(data);
  }
  async function deleteMore(params) {
    deleteUser(params).then(() => {
      handleSuccess();
    });
  }
  async function handleCreate() {
    openModal(true, {
      isUpdate: false,
    });
    await nextTick();
    userModelRef.value.addDisabled(false);
  }
  async function handleDetail(record: Recordable) {
    openModal(true, {
      record,
      isUpdate: true,
      isDetail: true,
    });
    await nextTick();
    userModelRef.value.addDisabled(true);
  }
  async function handleEdit(record: Recordable) {
    openModal(true, {
      record,
      isUpdate: true,
    });
    await nextTick();
    userModelRef.value.addDisabled(false);
  }

  async function handleDelete(record: Recordable) {
    const params = getObjectArrayByKey('id', record.id);
    deleteUser(params).then(() => {
      handleSuccess();
    });
  }

  function handleSuccess() {
    reload();
  }

  function selectedChange({ keys }) {
    if (keys.length) {
      selectedKeys.value = keys;
    } else {
      selectedKeys.value = [];
    }
  }
  function resetPasswordConfirm(record: Recordable) {
    let params = { ids: record.id };
    let data = {
      fun: resetPasswordHandel,
      params: params,
      content: '确认执行重置密码吗？',
    };
    screenConFirm(data);
  }
  function resetPasswordHandel(params) {
    resetPassword(params);
  }

  watch(
    [roleId, departId],
    (value) => {
      if (value[0] != undefined) {
        if (value.length > 0 && value != undefined) {
          reload({ searchInfo: { roleId: roleId.value } });
        }
      } else if (value[1] != undefined) {
        reload({ searchInfo: { departId: departId.value } });
      } else {
        reload();
      }
    },
    {
      // immediate: true,//会导致第一次进入时报错
      deep: true,
    }
  );

  return {
    registerTable,
    registerModal,
    handleCreate,
    handleEdit,
    handleDelete,
    handleSuccess,
    deleteMore,
    deleteMoreConfirm,
    selectedChange,
    selectedKeys,
    handleDetail,
    userModelRef,
    resetPasswordHandel,
    resetPasswordConfirm,
    hasPermission,
  };
},

});
</script>
使用的api方式加载table数据方式，当数据少于8条的时候没有问题，大于等于8条的时候，在笔记本电脑上会导致浏览器崩溃，台式机没有问题

[6155952]

我是笔记本，拉了6.1版本后，使用的谷歌浏览器访问：https://vvbin.cn/next/#/comp/table/formTable；这个组件出现卡死，拉了项目本地运行也是一样，使用火狐则不会出现这个问题。

[guxin-org]

你好，我也遇到同样问题，台式机正常,其他浏览器正常，笔记本下chrome ( 91.0.4472.77 64位 正式版本)会出现卡死状态。后面发现预览官方完整版demo Table组件也一样会出现卡死情况，还请尽快解决下。

[M69W]

请提供
1.系统版本;
2.硬件配置；
3.运行环境版本；
4.代码哪个commit的。

最好能提供一个出问题前的commit。作为对比

[anncwb]

我这边还原不出来，可以帮忙更新下这个提交，然后再试下吗 d81481c

[yanduhantan1991]

@anncwb 我使用了你提供的这个文件，问题依旧存在。win7系统，谷歌浏览器，版本 91.0.4472.77（正式版本） （64 位），8G内存，i7处理器，笔记本型号：ThinkPad w520卡死，戴尔7590卡死。另一个同事的联想笔记本G50，i5处理器可以使用，谷歌浏览器，版本 91.0.4472.77。

[anncwb]

@yanduhantan1991 能否看到控制台错误信息，或者堆栈错误信息，有的话可以截图给我方便查找

[yanduhantan1991]

[anncwb]

这些警告是你的业务代码警告，能否先解决后再次尝试？

[yanduhantan1991]

@anncwb
在其他管理页面控制台是没有任何报错的，也是这样卡死，数据不超过8条是没有问题的，大于等于8条就会卡死

[anncwb]

@yanduhantan1991 你可以帮忙直接用github的代码直接尝试，不用你自己的代码，然后给我个复现步骤。

[6155952]

@anncwb 项目的预览地址就会出现这样的问题了，你可以直接访问：https://vvbin.cn/next/#/comp/table/formTable

[yanduhantan1991]

@6155952 但是我的笔记本在预览的时候 没有 这个问题，在我开发的项目中有这个问题

[anncwb]

因为我电脑复现不了，所以我很难来排查这个问题，你们谁能帮忙排查下这个问题呢，给个错误的点也可以

[anncwb]

duplicate #720

[yeyuchen198]

我的戴尔笔记本电脑使用table有时滑动的时候也会卡顿，造成页面崩溃。。