Element UI Vue js渲染缓慢

时间:2020-02-06 06:03:09

标签: javascript vue.js element-ui

当我们更改任何值时,我通过v-for进行了200条记录循环,重新呈现更改后的值大约需要2秒,下面是示例代码。当我检查该值时,花费了将近2秒的时间。有什么方法可以提高渲染速度,对于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>

0 个答案:

没有答案