Адаптивное решение по высоте Element Table

Vue.js

анализировать

Как показано на рисунке ниже (в этой схеме используетсяElement TableОфициальный сайтcopyкод (в основном используется дляOA, CMS, ERPв таких системах)

Как показано на рисунке выше, в настоящее время в целом проблем нет, но есть подробная проблема, которая находится вtableЗаголовок исчезает при прокрутке

Если здесь много столбцов, а данные, которые нужно просмотреть пользователю, находятся в конце, что означают каждый раз данные определенного столбца (особенно если в таблице большое количество чисел, это очень раздражает), вам нужно прокручивать содержимое таблицы вверх и вниз.

Итак, мы говоримРешение состоит в том, чтобы исправить заголовок①(отметить вопрос)

Заголовок просто исправлен и официально предоставленprop => height, затем продолжайте смотреть на картинку ниже

В процессе использования продукта наша группа пользователей не может использовать экран одинакового размера.

Предположим, мы установили фиксированную высоту здесь600px

Затем некоторые пользователи сжимают окно во время использования, чего недостаточно.600px

будет появлятьсяtableизbodyодна полоса прокруткиtableНа внешнем контейнере появляется полоса прокрутки

Кроме того, некоторые пользователи используют большие экраны, очевидно.600pxВероятно, занимает только половину его экрана, здесь много данных

Потом появилась новая проблема, очевидно мой экран может отображаться, а товар занимает только его половину, а потом начать прокручивать

Итак, новый вопросКак установить высоту, чтобы мы могли адаптироваться к различным пользователям②

Здесь мы придумываем способ,динамически рассчитывается иtableизheightустановить как родительский узелheight

Родительский узел либоflex: 1,ещеheight：100%, может адаптироваться к

вопрос

Нам нужно решить две вышеупомянутые проблемы

  • Решение состоит в том, чтобы исправить заголовок
  • Как установить высоту, чтобы мы могли адаптироваться к различным пользователям

Фиксированный заголовок

Здесь заголовок исправлен или используетсяElement UIОфициально предоставленные программы - Настройкиheight

<!-- table 部分代码 -->
<el-table id="tableData" :data="tableData" :height="height">
  <el-table-column prop="date" label="日期" width="140"></el-table-column>
  <el-table-column prop="name" label="姓名" width="120"></el-table-column>
  <el-table-column prop="address" label="地址"></el-table-column>
</el-table>

export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄"
    };
    return {
      // 模拟数据
      tableData: Array(100).fill(item),
      // 随便定义一个初始高度防止报错
      height: "200px"
    };
  }
}

Установите, как указано вышеheightзадаватьtableФиксированный заголовок

Как установить высоту

Заголовок исправлен выше, и мы продолжаем задавать его динамически.heightдля родительского узлаheight

и датьel-tableустановить идентификатор<el-table id="tableData" :data="tableData" :height="height">

Здесь следует отметить, что мы устанавливаем его как родительский узелheightВ процессе предположения, что родительский узел имеет значение заполнения, нам нужно его вычесть.

export default {
	methods: {
    // 这个方法用来动态设置 height
    getAutoHeight() {
      let el = document.querySelector("#tableData"),
        elParent = el.parentNode,
        pt = this.getStyle(elParent, "paddingTop"),
        pb = this.getStyle(elParent, "paddingBottom");
      // 一定要使用 nextTick 来改变height 不然不会起作用
      this.$nextTick(() => {
        this.height = elParent.clientHeight - (pt + pb) + "px";
      });
    },
    // 获取样式 我们需要减掉 padding-top， padding-bottom的值
    getStyle(obj, attr) {
      // 兼容IE浏览器
      let result = obj.currentStyle
        ? obj.currentStyle[attr].replace("px", "")
        : document.defaultView
            .getComputedStyle(obj, null)[attr].replace("px", "");
      return Number(result);
    }
  }
}

Высота задана, нам нужно вызвать этот метод в функции хука после монтирования

export default {
  mounted() {
    this.getAutoHeight();
  }
}

Это в принципе не далеко от конца, продолжайте смотреть на картинку

Но здесь возникает новая проблема, а именно, если размер окна меняется, исходныйheightне относится к настоящемуheight

Давай-давай, продолжай смотреть на картинку, появятся две полосы прокрутки

Решение этой задачи требует двух операций

существуетwindow.onresizeВызовите метод, который мы установили, чтобы получить высоту в

export default {
  mounted() {
    this.getAutoHeight();
    const self = this;
    window.onresize = function() {
      self.getAutoHeight();
    };
  }
}

и родительский узелCSSУстановить какoverflow: hiddenПример кода официального сайта, который я использую здесь, выглядит следующим образом

.el-main {
  overflow: hidden !important;
}

конечный результат

Я использую высоту консоли для имитации изменения высоты окна.

Полный код выглядит следующим образом

<template>
  <el-container class="layout" style="border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">ASIDE</el-aside>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">HRADER</el-header>
      <el-main>
        <el-table id="tableData" :data="tableData" :height="height">
          <el-table-column prop="date" label="日期" width="140"></el-table-column>
          <el-table-column prop="name" label="姓名" width="120"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "AutoHeightTable",
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄"
    };
    return {
      tableData: Array(100).fill(item),
      height: "200px"
    };
  },
  mounted() {
    this.getAutoHeight();
    const self = this;
    window.onresize = function() {
      self.getAutoHeight();
    };
  },
  methods: {
    getAutoHeight() {
      let el = document.querySelector("#tableData"),
        elParent = el.parentNode,
        pt = this.getStyle(elParent, "paddingTop"),
        pb = this.getStyle(elParent, "paddingBottom");
      this.$nextTick(() => {
        this.height = elParent.clientHeight - (pt + pb) + "px";
      });
    },
    getStyle(obj, attr) {
      // 兼容IE浏览器
      let result = obj.currentStyle
        ? obj.currentStyle[attr].replace("px", "")
        : document.defaultView
            .getComputedStyle(obj, null)[attr].replace("px", "");
      return Number(result);
    }
  }
};
</script>
<style>
.layout {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-main {
  overflow: hidden !important;
}
</style>

Приведенный выше код - это просто идея

больше решений

Это все еще должно быть упаковано с точки зрения бизнеса

Категории