动态监听页面宽度变化，并修改页面表格宽度

思路

1、封装监听事件 2、引用封装函数 3、改变表格列宽

注意：公司UI库，部分代码不进行展示了

代码展示

1、封装监听事件

/* eslint-disable*/
/**
 * @name 浏览器窗口宽度监听器
 * @param callback 接收变化的单参函数
 * @param windowWidth 浏览器窗口界限宽度，默认1366
 * @param debounceWait 防抖时间，默认100ms
 */
export default function (callback, windowWidth = 1366, debounceWait = 100) {
  if (typeof callback !== 'function') {
    throw new Error('listenerWindowWidth.js：Missing required function parameter!');
  }

  Function.prototype.___after = function (afterFn) {
    const __self = this;
    return function () {
      const ret = __self.apply(this, arguments);
      afterFn.apply(this, arguments);
      return ret;
    };
  };

  function debounce(func, wait) {
    let timeout;
    return function () {
      const context = this;
      const args = arguments;

      if (timeout) clearTimeout(timeout);

      timeout = setTimeout(() => {
        func.apply(context, args);
      }, wait);
    };
  }

  window.onresize = (window.onresize || function () {}).___after(
    debounce(() => {
      const LE = window.innerWidth > windowWidth;
      callback(LE);
    }, debounceWait)
  );
}

// import('./assist/listenerWindowWidth').then(listenerWindowWidth => listenerWindowWidth.default(this.toggleClick));

// toggleClick (isShrink) {
//   this.shrink = typeof isShrink === 'boolean' ? isShrink : !this.shrink;
//   Cookies.set(...['isShrink', this.shrink ? 1 : 0].concat(this.cookieExtend()));
// }

2、引用封装函数 | 3、改变表格列宽

import listenerWindowWidth from '@/libs/listenerWindowWidth';
import { dataExtractionColumns } from './columns';

setup() {
    const columns = ref([]);
    
    const changeColumnsWidth = isWideScreen => {
      // 动态修改表格列宽
      if (isWideScreen) {
        columns.value.forEach(element => {
          if (element.key === 'fileName') {
            element.minWidth = 220;
            fileNameWidth.value = '220px';
          }
          if (element.key === 'createTime' || element.key === 'updateTime') {
            element.width = 170;
          }
        });
      } else {
        columns.value.forEach(element => {
          if (element.key === 'fileName') {
            element.minWidth = 170;
            fileNameWidth.value = '170px';
          }
          if (element.key === 'createTime' || element.key === 'updateTime') {
            element.width = 105;
          }
        });
      }
    };
    
    listenerWindowWidth(changeColumnsWidth); // 监听窗口宽度变化
    
    onMounted(() => {
      columns.value = dataExtractionColumns; // 初始化列宽，具有响应性
      changeColumnsWidth(window.innerWidth > 1366); // 初始化时，屏幕宽度没变，onresize监听不到
      getList(); // 请求列表数据
    });
}