如果直接使用 ElementPlus 的 Table 组件来作为表格,一次性渲染全部元素,进而导致一次性绑定全部事件(200 * 6 = 1200,也就是至少需要绑定 1200 个事件),需要的时间太长,用户体验非常差(快的话需要 3 秒,慢的话需要几分钟乃至十分钟以上)。因此,需要引入虚拟滚动来避免一次性渲染全部元素。 ElementPlus 的 Table...
在开发 vue 大型项目中,必然少不了 vxe-table 专业的表格库,当同时配合 element-plus 组件库使用时,发现一个问题,就是在单元格中渲染 el-select 时,会导致下拉选项无法被选中,点击后立马就消失,看了 vxe-table 官方文档,是支持与任意第三方库集成的,发现官网扩展插件里面有个适配插件安装一下就可以了正常选择了...
<vxe-table border :data="tableData" height="auto"> <vxe-column type="checkbox" width="60"></vxe-column> <vxe-column field="name" title="Name"></vxe-column> <vxe-column field="sex" title="Sex"></vxe-column> <vxe-column field="date" title="Date"></vxe-column> <vxe-column fi...
Vue大量数据展示用什么库?vxe table element-plus 虚拟列表 #前端 #vue - 李钟意讲前端于20231009发布在抖音,已经收获了8.7万个喜欢,来抖音,记录美好生活!
现状:项目使用的是 element-ui 2.x 及 vxe-table 2.x 解决方案: 升级vue3,使用 element-plus + vxe-table 4.x。vue3 之后推荐使用css 变量变更主题。肥肠方便,but。对于这个老项目来说升级的代价太重了,承担不起,pass 了。 element-ui 2.x 及 vxe-table 2.x 都是推荐使用 scss 生成 css 文件去使用...
目前由于我的项目中,主要使用element-plus 与 vxe-table,为了保持两种插件的主题样式统一,所以,我在我的项目中按需引入了vxe-table的部分样式但是由于element-plus 使用的sass版本是1.36.x 这导致,我引入的vxe-table的table.scs
1.npm install xe-utils vxe-table@next 第二部 main.js 引入 import { createApp } from 'vue' import App from './App.vue' const app = createApp(App) //--- import 'xe-utils' import VXETable from 'vxe-table' import 'vxe-table/lib/style.css' app.use(VXE...
在 Vue 3 业务中，当使用 VXETable 这个虚拟滚动表格组件并嵌套 ElementPlus 的 Form 表单时，可能会遇到表单校验不正确的问题。业务需求是在表格中嵌套表单，用于展示和修改数据。如果直接使用 ElementPlus 的 Table 组件一次性渲染全部元素，会导致需要绑定的事件数量过大（例如200 * 6 = 1200），从而...
直接使用 ElementPlus 的 Table 组件会导致一次性绑定事件过多，性能不佳。引入虚拟滚动的 VXETable 后，性能有所改善，但发现表单校验存在异常：新增行后立即提交无法通过校验，需要滚动后再提交才能通过。这与预期不符，表明问题可能与虚拟滚动机制相关。通过实验，确认问题确实与 VXETable 的虚拟滚动功能...
1、首先在电脑上的应用市场搜索Vxe-table（基于vue的pc端表格插件），点击下载安装。2、其次在main.js中引入vxe-table。3、最后选择运行插件，自定义选择要引入的模块，有效减少项目体积。