vue中引入umy-ui的ux-grid || 打开el-table页面卡顿 || el-table渲染数据慢

vue中引入umy-ui的ux-grid

序：umy-ui的官网

问题点：

• vue中引入umy-ui的ux-grid
• 打开el-table页面卡顿
• el-table以滚动条形式渲染上千条数据慢

1. man.js中引入umy-ui

完整引入umy-ui

import UmyUi from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css'
Vue.use(UmyUi)

2. 在本地库中安装umy-ui的安装包

 npm install umy-ui

3. 页面中使用 ux-grid 虚拟表

下面是一个完整的弹出页面，ux-table-column类似于el-table-column，其中的属性 title=“数量” field=“equNum” 不一样

 <el-dialog
     title="选择武器装备"
     :visible.sync="dialogVisibleEdit"
     top="30px"
     width="50%"
     :center="false"
     :append-to-body="true"
   >
     <ux-grid
       ref="multipleTable"
       :data="checkArmyEquips" 
       class="dialogClass"
       height="550px"
       @selection-change="handleSelectionChange"
     >
       <ux-table-column type="checkbox" width="50" />
       <ux-table-column title="名称" field="zbmc" />
       <!--这里是下拉框菜单 
       :filter-multiple="false"：表示只能选择一个
        title="类型"： 相当于el-table-column中的label属性
        :filters="filters"： 过滤方法不用写，会内部直接过滤，filters：[]，菜单中展示的过滤项
        -->
       <ux-table-column title="类型" field="zbldm" sortable :filters="filters" :filter-multiple="false">
         <template slot-scope="{row}">
           {{ getDictLabel(dictData.zbldm, row.zbldm) }}
         </template>
       </ux-table-column>
       <ux-table-column title="数量" field="equNum">
         <template slot-scope="scope">
           <el-input-number v-model="scope.row.equNum" :min="0" width="80%" @change="handleChange(scope.row.equNum)" />
         </template>
       </ux-table-column>
     </ux-grid>
     <span slot="footer" class="dialog-footer">
       <el-button type="primary" @click="handleEditSubmit()">确 定</el-button>
       <el-button @click="handleClear()">清 空</el-button>
       <el-button @click="handleEditClose()">取 消</el-button>
     </span>
   </el-dialog>

 handleSelectionChange(val) {
   this.multipleSelection = val
 }

4. 效果图