大数据性能优化

下拉列表：使用vue-virtual-scroll-list插件

使用<virtual-list>包裹for循环渲染的部分

// size:每行是多高，   remain：想要渲染多少条数据
 <Select v-model="selectData" style="width:200px">
      <virtual-list :size="30" :remain="6">
        <Option v-for="item in list" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </virtual-list>
    </Select>


<script>
import VirtualList from 'vue-virtual-scroll-list'
export default {
  components: {
    VirtualList
  }
}
</script>

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

 

表单优化：

每个formitem包成一个组件，在页面遍历引用传值