Javascript 元素UI Vue js在渲染时速度较慢

我有200多条记录在v-for中循环，当我们更改任何值时，需要将近2秒的时间重新输入更改后的值，下面是示例代码。当我检查该值时，检查复选框需要将近2秒的时间。有没有办法提高渲染速度这对200条记录来说真的很慢。谢谢 沙箱链接

导出默认值{
名称：“MultiCheckBox”，
创建（）{
this.selections=this.rows
this.totalEnabledRows=this.rows.filter（v=>！v.disabled）.length
},
道具：{
行：{
类型：数组，
必填项：true
}
},
数据（）{
返回{
checkAll:false，
ISINDEMINATE:错误，
选定的箭头：[]，
选择：[]，
totalEnabledRows:0
}
},
观察：{
行（val）{
this.selections=val
this.totalEnabledRows=val.filter（v=>！v.disabled）.length
},
选择：{
处理程序（val）{
让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
此.$emit（'选中'，选中）
},
深：是的
}
},
方法：{
handlecheckalchange（）{
this.selections.forEach（s=>{
！s.disabled&（s.checked=this.checkAll）
})
}
}
}
.选择{
位置：粘性；
左：0；
z指数：103；
背景：白色；
}
.检查组{
高度：40px；
填充：10px 10px 10px 25px；
宽度：50px；
边框顶部：1px实心#dde2eb；
边框底部：1px实心#dde2eb；
柔性包装：nowrap；
背景：白色；
位置：粘性；
顶部：50px；
左：0；
z指数：103；
}
.检查{
高度：48px；
填充：10px 10px 10px 25px；
宽度：50px；
}

您能否使用以下命令为您的问题添加一个小示例？这将允许我们调整代码以加快速度。查看您的代码，我将尝试改进更改检测，包括您的模型观察者。不过，提供适当帮助最好是最小回购。请在下面的沙箱链接中查找代码，谢谢@Titulumclearly从您的代码中我可以看到呈现中的瓶颈是

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}

删除它，而不是在每个复选框上使用事件处理程序，由于您使用的是

el复选框

，因此需要使用自己的组件进行包装

<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>