页面自适应平板尺寸做适配

首先写方法来判定当前网页是否为平板尺寸

    methods: {
      checkDevice() {
        // 检测屏幕宽度是否为平板尺寸（768px-1024px）
        const width = window.innerWidth
        this.isTablet = width >= 768 && width <= 1024
      },

加入监听

    mounted() {
      this.checkDevice()
      window.addEventListener('resize', this.checkDevice)  // 监听窗口大小变化
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.checkDevice)  // 移除监听
    }

如何每个元素就可以这样来设置比例宽度了：

  <!-- 所有列使用统一比例系数控制 -->
      <el-table-column 
        prop="id" 
        label="ID" 
        :width="60 * scaleRatio"  <!-- 固定列按比例缩放 -->
      ></el-table-column>
      
      <el-table-column 
        prop="name" 
        label="姓名" 
        :flex="2 * scaleRatio"  <!-- 基础比例×缩放系数 -->
      ></el-table-column>
      
      <el-table-column 
        prop="phone" 
        label="电话" 
        :flex="1.5 * scaleRatio"
      ></el-table-column>