Элемент UI Vue js медленно рендерится - PullRequest
Новая
       2

Элемент UI Vue js медленно рендерится

2 голосов
/ 06 февраля 2020

У меня более двухсот записей циклически проходящих через v-for, когда мы меняем любое значение, требуется почти 2 se c, чтобы повторно отобразить измененное значение, приведенное ниже, это пример кода. когда я проверяю значение, это занимает почти 2 se c для флажков. Есть ли способ улучшить скорость рендеринга, это действительно медленно для 200 записей. Спасибо. песочница ссылка https://codesandbox.io/s/focused-mahavira-9cc9s

<template>
  <div class="selection">
    <div class="check-group">
      <el-checkbox
        @change="handleCheckAllChange"
        :indeterminate="isIndeterminate"
        v-model="checkAll"
      ></el-checkbox>
    </div>
    <div v-for="row in selections" :key="row.id" class="check">
      <el-checkbox v-model="row.checked" :disabled="row.disabled" :value="row.id" :key="row.id"></el-checkbox>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MultiCheckBox',
  created() {
    this.selections = this.rows
    this.totalEnabledRows = this.rows.filter(v => !v.disabled).length
  },
  props: {
    rows: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      checkAll: false,
      isIndeterminate: false,
      selectedRows: [],
      selections: [],
      totalEnabledRows: 0
    }
  },
  watch: {
    rows(val) {
      this.selections = val
      this.totalEnabledRows = val.filter(v => !v.disabled).length
    },
    selections: {
      handler(val) {
        let selected = val.filter(v => v.checked).map(v => v.id)
        this.isIndeterminate = this.totalEnabledRows > 0 && selected.length > 0 && this.totalEnabledRows > selected.length
        this.checkAll = this.totalEnabledRows === selected.length
        this.$emit('checked', selected)
      },
      deep: true
    }
  },
  methods: {
    handleCheckAllChange() {
      this.selections.forEach(s => {
        !s.disabled && (s.checked = this.checkAll)
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.selection {
  position: sticky;
  left: 0;
  z-index: 103;
  background: white;
}
.check-group {
  height: 40px;
  padding: 10px 10px 10px 25px;
  width: 50px;
  border-top: 1px solid #dde2eb;
  border-bottom: 1px solid #dde2eb;
  flex-wrap: nowrap;
  background: white;
  position: sticky;
  top: 50px;
  left: 0;
  z-index: 103;
}
.check {
  height: 48px;
  padding: 10px 10px 10px 25px;
  width: 50px;
}
</style>
...