title: Element UI Vue js is slow in render
body: <p>I have over two hundred record looping through v-for when we change any value it takes nearly 2 sec to rerender the changed value below is the sample code. when I check the value it takes nearly 2 sec to the checkboxes. Is there any way to improve the rendering the speed this is really slow for 200 records. Thanks.
  sandbox link <a href="https://codesandbox.io/s/focused-mahavira-9cc9s" rel="nofollow noreferrer">https://codesandbox.io/s/focused-mahavira-9cc9s</a></p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="selection"&gt;
      &lt;div class="check-group"&gt;
        &lt;el-checkbox
          @change="handleCheckAllChange"
          :indeterminate="isIndeterminate"
          v-model="checkAll"
        &gt;&lt;/el-checkbox&gt;
      &lt;/div&gt;
      &lt;div v-for="row in selections" :key="row.id" class="check"&gt;
        &lt;el-checkbox v-model="row.checked" :disabled="row.disabled" :value="row.id" :key="row.id"&gt;&lt;/el-checkbox&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'MultiCheckBox',
    created() {
      this.selections = this.rows
      this.totalEnabledRows = this.rows.filter(v =&gt; !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 =&gt; !v.disabled).length
      },
      selections: {
        handler(val) {
          let selected = val.filter(v =&gt; v.checked).map(v =&gt; v.id)
          this.isIndeterminate = this.totalEnabledRows &gt; 0 &amp;&amp; selected.length &gt; 0 &amp;&amp; this.totalEnabledRows &gt; selected.length
          this.checkAll = this.totalEnabledRows === selected.length
          this.$emit('checked', selected)
        },
        deep: true
      }
    },
    methods: {
      handleCheckAllChange() {
        this.selections.forEach(s =&gt; {
          !s.disabled &amp;&amp; (s.checked = this.checkAll)
        })
      }
  
    }
  }
  &lt;/script&gt;
  
  &lt;style lang="scss" scoped&gt;
  .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;
  }
  &lt;/style&gt;
  </code></pre>