vue2使用element-ui,el-table不显示,用npm安装方式

 更新时间:2023年07月18日 09:48:57   作者:xtcyolo  
这篇文章主要介绍了vue2使用element-ui,el-table不显示,用npm安装方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue2使用element-ui,el-table不显示,用npm安装

记录

el-table不显示,其他组件一切正常

原因

用cnpm安装可能会不显示,直接卸载然后重新安装,用npm

npm uninstall element-ui
npm install element-ui -S

vue element-ui弃用el-table 改换pl-table

界面显示5000条数据,el-table 直接卡死,原因就是因为el-table 采用的是DOM 内存占用过多,引起阻塞

解决方案

懒加载:即监听scroll事件或使用IntersecionObserver监听;

可视区域的渲染:仅在可视区域展示数据,为保证滚动条的完整性,非可视区域使用占位元素的高度后者容器的位移来撑开。

整合pl-table

1、安装pl-tablb 建议采用cnpm i 

npm i pl-table
cnpm i pl-table
yarn - pl-table        

2、main.js 引入,整个框架采用的是element-ui 所以不引人第二个样式,使用原生的element-ui样式 

import plTable from 'pl-table'
import 'pl-table/themes/index.css' // 引入样式(必须引入),vuecli3.0不需要配置,cli2.0请查看webpack是否配置了url-loader对woff,ttf文件的引用,不配置会报错哦
// import 'pl-table/themes/plTableStyle.css' // 默认表格样式很丑 引入这个样式就可以好看啦(如果你不喜欢这个样式,就不要引入,不引入就跟ele表格样式一样)
Vue.use(plTable);  

3、使用

<el-table border size="mini" class="table-ui" max-height="700" :stripe="true" :data="tableData" @row-dblclick="rowDblclick" @selection-change="changeFun"   @sort-change="sortChange" >
    <el-table-column prop="sequenceNum" label="序号"></el-table-column>
    <el-table-column prop="countyName" label="县(市、"></el-table-column>
    <el-table-column prop="streetName" label="乡镇(街"></el-table-column>
    <el-table-column prop="groupName" label="村(组)"></el-table-column>
</el-table>
<pl-table border size="mini" class="table-ui" max-height="700" :stripe="true" :data="tableData" @row-dblclick="rowDblclick" @selection-change="changeFun"   @sort-change="sortChange" big-data-checkbox  fixedColumnsRoll use-virtual>
    <pl-table-column prop="sequenceNum" label="序号"></pl-table-column>
    <pl-table-column prop="countyName" label="县(市、"></pl-table-column>
    <pl-table-column prop="streetName" label="乡镇(街"></pl-table-column>
    <pl-table-column prop="groupName" label="村(组)"></pl-table-column>
</pl-table>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue从TodoList中学父子组件通信

    Vue从TodoList中学父子组件通信

    这篇文章主要介绍了Vue从TodoList中学父子组件通信,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue-resource拦截器设置头信息的实例

    vue-resource拦截器设置头信息的实例

    下面小编就为大家带来一篇vue-resource拦截器设置头信息的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • 浅析vue中常见循环遍历指令的使用 v-for

    浅析vue中常见循环遍历指令的使用 v-for

    这篇文章主要介绍了vue中常见循环遍历指令的使用 v-for,包括v-for遍历数组,v-for遍历json对象,本文给大家介绍的非常详细,需要的朋友可以参考下
    2018-04-04
  • Vue报错"Failed to resolve loader:less-loader"的解决方法

    Vue报错"Failed to resolve loader:less-loader"的解决方

    这篇文章主要给大家介绍了关于Vue报错"Failed to resolve loader:less-loader"的解决方法,文中通过图文介绍的非常详细,对同样遇到这样问题的朋友具有一定的需要的朋友可以参考下
    2023-02-02
  • vue router 路由跳转方法讲解

    vue router 路由跳转方法讲解

    这篇文章主要介绍了vue router 路由跳转方法概述,使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库,本文结合示例代码给大家详细讲解,需要的朋友可以参考下
    2022-12-12
  • 浅谈Vue数据响应

    浅谈Vue数据响应

    这篇文章主要介绍了浅谈Vue数据响应,Vue的数据响应主要是依赖了Object.defineProperty(),下面就具体来介绍一下如何实现数据响应
    2018-11-11
  • Vue3使用defineAsyncComponent实现异步组件加载的代码示例

    Vue3使用defineAsyncComponent实现异步组件加载的代码示例

    在 Vue 3 中,异步组件加载是一种优化应用性能的重要手段,通过异步加载组件,可以减少初始加载时的资源体积,从而提升应用的加载速度和用户体验,本文将详细介绍如何使用 defineAsyncComponent 实现异步组件加载,并提供相关的代码示例,需要的朋友可以参考下
    2025-03-03
  • Vue filter格式化时间戳时间成标准日期格式的方法

    Vue filter格式化时间戳时间成标准日期格式的方法

    今天小编就为大家分享一篇Vue filter格式化时间戳时间成标准日期格式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解vue数据响应式原理之数组

    详解vue数据响应式原理之数组

    这篇文章主要为大家详细介绍了vue数据响应式原理之数组,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-02-02
  • 父子组件生命周期及子组件获取数据传值问题剖析

    父子组件生命周期及子组件获取数据传值问题剖析

    这篇文章主要介绍了父子组件生命周期及子组件获取数据问题剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10

最新评论