表格优化

在Vue项目中使用vue-virtual-scroll-list插件，这是一个组件
想想一下一个下拉框有1000条数据，渲染下拉框和选择下拉框中的项目就会出现明显的卡顿。
使用方法：
使用virtual-list把需要循环渲染的东西包裹起来

<virtual-list :size="30" :remain="6">
        <Option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}</Option>
</virtual-list>

<CheckboxGroup v-model="checkedArr">
      <virtual-list :size="30" :remain="10">
        <p v-for="item in list" :key="`check${item.value}`" style="height: 30px;">
          <Checkbox :label="item.value">
              <Icon type="logo-twitter"></Icon>
              <span>{{ item.label }}</span>
          </Checkbox>
        </p>
      </virtual-list>
 </CheckboxGroup>

实际渲染remain中的条数，页面出现的滚动条是该插件通过padding-top和padding-bottom撑起来的，实际上并没有在页面最初加载的时候就渲染这么多数据。极大优化了性能。
remian: 渲染多少条数据
原理： 当滚动时候，会计算容器的尺寸，实际渲染时只会渲染11条。不是一次性都渲染出来，是动态的添加数据。

表单数据太多也会出现卡顿

优化表单数据
元婴：很多数据只传入了一个组件，数据会被传入根元素中，当数据变动时，它会从根元素进行数据的遍历渲染，里面的东西越多，用的时间就越长。
解决方法：不要全部数据都绑定在一个组件上，在组件外面嵌套一层标签，让一个组件上只渲染以条数据

<form-single
      ref="formSingle"
      v-for="(item, index) in formList"
      :key="`form_${index}`"
      :config="item"
      :value-data="valueData"
      :rule-data="ruleData"
      :error-store="errorStore"
 ></form-single>

tips：上面的组件form-single里面时循环渲染的form，使用this.$refs.formSingle获取到的元素是数组，是整个这整个需要渲染的表单数组

this.$refs.formSingle.forEach(item => {
        item.validate(valid => {
          if (!valid) isValid = false
        })
 })

上面的item就是每个表单实例，validate方法是在FormSingle单页中编写的方法。

表格渲染优化