Vue 中使用dataV 轮播表 适配 大屏 rem 解决方案

安装

npm install @jiaminghi/data-view

全局引入

// 将自动注册所有组件为全局组件
import dataV from '@jiaminghi/data-view'

Vue.use(dataV)

按需引入

import { scrollBoard } from "@jiaminghi/data-view";
Vue.use(scrollBoard);

html

"emergencySuppliesConfig.data.length" class="energency-expert-scroll emergency-supplies-table" :config="emergencySuppliesConfig" />

当数据从接口动态获取时候加上 v-if=“emergencySuppliesConfig.data.length”，才能正确渲染

配置项emergencySuppliesConfig

emergencySuppliesConfig:{
        header: ["qq", "www","eee","rrrr"], // 表头数据
        columnWidth: [100],//分别对应列宽
        data: [],//接口获取的数据 二维数组，一一对应
        rowNum: 11, // 表行数
        // index: true,//是否显示序号
        waitTime: 2000, // 轮播时间间隔(ms)
        align: "center",//文字对齐方式
        headerHeight:fontSize(2.5),//设置表头高度，这里非常重要，表格的行高就是根据总的容器高度减表头的高度动态来的，fontSize 将rem转换成px 单位，这样才能做到自适应
      },

fontSize函数

export function fontSize(res) {
  let docEl = document.documentElement,
    clientWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
  if (!clientWidth) return;
  let fontSize = 100 * (clientWidth / 23329);
  return res * fontSize;
}

请求接口渲染数据

 this.$http
        .get(this.$api.emergencyOnDuty.getEmergencyMaterial)
        .then(res => {
         this.emergencyMaterialCard = {          
         this.emergencySuppliesConfig.data = res.data.emergencyMaterialList.map(item => {
            return [item.name, item.level, item.street, item.area]
          })
        })
        .catch(() => {});

需要注意的点，表格的行高是动态生成的，并且都是已px为单位的，但是我们要做大屏在任意宽的屏幕下，都能自适应，所以所有的单位都是rem，但是在配置项里不能写rem 单位，所以需要函数转化一下。