Помните об адаптивности компонента таблицы конфигурации element-ui (горизонтальная полоса прокрутки)

внешний интерфейс GitHub Element CDN

Изначально хотел воспроизвести на jsfiddle, но не получилось, поэтому покажу скрины

截图

vue版本：2.5.3
element-ui版本：1.4.13
浏览器：chrome 66.0.3359.170

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

Затем я поискал проблему в Интернете и нашел связанные с ней проблемы.GitHub.com/E?Fe/Голодный… GitHub.com/E?Fe/Голодный…

где вопрошающий под номером 78 дал решениеGitHub.com/Цин Вэй-ли/…

Одна вещь похожа на # 78, моя таблица также настроена, а заголовок и содержимое передаются как атрибуты, что может привести к неточному расчету ширины таблицы при первом рендеринге, в результате чего окончательная ширина превышает 2 пикселя (проверено на be border).width); но решение неприменимо. С одной стороны, проект принимает метод загрузки cdn. С другой стороны, я пробовал версию 1.4.13 и версию 1.0.1 решения. структура кода непоследовательна, и я не знаю элементную составляющую, поэтому пытаюсь разобраться сам.

Сначала вставьте код моей таблицы конфигурации для удобства использования позже

<template>
  <div>
    <el-table border :data="data" height="550" v-loading="isLoading">
      <el-table-column v-for="{value, label, options} in columns" :key="value" :label="label" :prop="value">
        <template slot-scope="{row}">
          <span v-if="!options">{{row[value]}}</span>
          <div v-else-if="options && options.filter">{{row[value] | filterData(options.filter)}}</div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <!--这里可在父级插入自定义操作按钮-->
          <slot :row="row"/>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" @fetchData="$emit('fetchData')"/>
  </div>
</template>
<script>
  import Pagination from 'FORM/Pagination'
  import {formatTimestamp} from 'UTILS'

  export default {
    props: {
      isLoading: {
        type: Boolean,
        default: false,
        required: true
      },
      columns: {
        type: Array,
        default: [],
        required: true
      },
      data: {
        type: Array,
        default: [],
        required: true
      },
      total: {
        type: Number,
        default: 0,
        required: true
      }
    },
    components: {
      Pagination
    },
    filters: {
      filterData: function (value, filter) {
        if (!filter) return value
        switch (filter) {
          case 'formatDate':
            return formatTimestamp(value)
            break;
          default:
            return value
        }
      }
    }
  }
</script>

Вариант 1. Попробуйте изменить данные после рендеринга и дайте таблице перерисовать

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

Вариант 2. Попробуйте удалить границу в 2 пикселя после рендеринга.

Отладка в браузере найдена для удаления.el-tableПосле левой и правой границel-tableСвяжите класс, снимите границу, но не слишком красивая граница. . .

Вариант 3: оставить расчет ширины браузеру

Также отладил в браузере и обнаружил, что.el-table__body-wrapperАтрибут overflow скрыт и отображается снова, горизонтальная полоса прокрутки не появится, ее нужно добавить зановоoverflow: auto;Заставляет браузер сам пересчитывать ширину таблицы, поэтому горизонтальную полосу прокрутки не нужно отображать, если ширины достаточно;

Таким образом:

<!-- template -->
<el-table ref="configurationTable" border :data="data" :height="height" v-loading="isLoading" :class="['configurationTable', {afterRenderClass: showAfterRenderClass}]">
  <!-- xxx -->
</el-table>

// script
data () {
  return {
    showAfterRenderClass: false
  }
},
updated () {
  /**
   * 用于隐藏固定高度时显示不必要的scrollX的定时器
   * 这是el-table初次渲染时宽度计算的bug，可在渲染后通过重新赋予overflow: auto调整
   */
  const handleScrollX = setInterval(() => {
    // 检测是否已经生成table节点，如果不是就每隔0.5s检测一次
    // 只有生成了真实节点才能够通过修改overflow属性让浏览器重新计算
    if (this.$refs.configurationTable) {
      this.showAfterRenderClass = true
      clearInterval(handleScrollX)
    }
  }, 500)
}

/** style (注意不要设为scoped) */
/** configurationTable和afterRenderClass都是为了标记仅这个组件内修改 */
.configurationTable .el-table__body-wrapper {
    overflow: hidden;
}
.afterRenderClass {
    .el-table__body-wrapper {
        overflow: auto;
    }
}

Суммировать

Поскольку поддержка element-ui v1 прекращена, мы не будем упоминать о новых проблемах, а затем нам все еще нужно перейти на element-ui2 (если у вас есть инструмент миграции, вы можете порекомендовать его, и вы также можете порекомендовать его, если вы наступили на яму), в противном случае покиньте ее.Эта черная магия увеличивает затраты на обслуживание.

Категории