便利贴--22{Avue表格自定义以及适应高度}

原创

已于 2022-02-15 11:02:46 修改 · 4.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html5

于 2022-02-11 14:15:23 首次发布

该博客介绍了如何在Vue项目中使用Avue组件库时，实现表格高度自适应以及全局监听屏幕尺寸变化。通过监听窗口大小并结合Avue的样式调整，确保表格在不同屏幕尺寸下保持良好显示效果。内容涉及到Vue页面的watch备份，以及如何处理由于Avue封装导致的初次高度设置问题。

便利贴--22{Avue表格自定义以及适应高度}

store-只需要给自己的表格加上class
全局监听尺寸--在系统初始化的时候运行
我使用的样式
vue页面中watch备份
提示，由于avue封装，第一次设置的高度要最高，因为后面改高度只会响应在第一次高度范围内，导致不生效

store-只需要给自己的表格加上class

<avue-crud
class=“tablesss”
这加上class

// import {getStore, setStore} from '@/util/store'

// import {getDictionary} from '@/api/system/dict'
let screenSizes = {
   
   
  w: window.screen.width,
  h: window.screen.height
};
let innerWH = {
   
   
  innerWidth: window.innerWidth,
  innerHeight: window.innerHeight
};
const control = {
   
   
  state: {
   
   
    clearOtherBut: {
   
   
      refreshBtn: false,
      columnBtn: false,
      searchShowBtn: false,
      filterBtn: false,
      addBtn: false,
      editBtn: false,
      viewBtn: false,
      delBtn: false,
      searchIndex: 6, //收缩展示数量
      searchIcon: true, //搜索是否收缩
      height: window.screen.height //初始高度
    },
    changePageSize: {
   
   
      pageSize: 15,
      currentPage: 1,
      total: 0,
      pageSizes: [15, 30, 50, 100]
    },
    windowWidth: innerWH.innerWidth,
    windowHeight: innerWH.innerHeight,
    tableWindowHeight: innerWH.innerHeight,
    heightTimesOut: "",
    table_height: "",
    butState: "",
    oldOpens: "",
    screenSize: screenSizes.w <= 1366 && screenSizes.h <= 768,
    screenHeight: 1000,

    searchOpen: {
   
   
      searchIndex: 6, //收缩展示数量
      searchIcon: true, //搜索是否收缩
      height: window.screen.height //初始高度
    }
  },
  actions: {
   
   
    WHchangeHight({
    
    
      state,
      commit
    }, data) {
   
   
      if (data.fn) {
   
   
        if (!state.heightTimesOut) {
   
   
          data.fn(state.windowHeight);
        } else {
   
   
          state.heightTimesOut = setTimeout(() => {
   
   
            clearTimeout(state.heightTimesOut);
            state.heightTimesOut = "";
            data.fn(state.windowHeight);
          }, 500);
        }
      }
    },

    TABLE_CHANGEBUTPOSITION({
    
    
      state,
      commit,
      dispatch
    }, data) {
   
   
      let table = document.getElementsByClassName("tablesss")[0];
      let heard = table.getElementsByClassName("avue-crud__search")[0]; //获取搜索的长度
      let buts = table.getElementsByClassName("avue-form__menu--center")[0];
      let Open = buts.getElementsByClassName("el-button--text")[0];
      let butsheight = heard.clientHeight;
      let other = data.otherclass || [];
      // buts.style.transition = "all 0.1s";
      if (buts) {
   
   
        buts.style.top = butsheight - 3 + "px";
      }
      if (other && state.windowWidth >= 1024) {
   
   
        for (let k in other) {
   
   
          let otherbuts = document.getElementsByClassName(other[k])[0];
          // otherbuts.style.transition = "all 0.1s";
          if (otherbuts) {
   
   
            otherbuts.style.top = butsheight + 26 + "px";
          }
        }
      }
      // Open.style.transition = "all 0.1s";
      // Open.style.top = -(butsheight + 4) + "px";
      // 添加事件
      if (Open) {
   
   
        Open.style.top = (state