![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
element
Amnesia�
一个正在努力中的前端小白
展开
-
【ElementUI】el-table可编辑/输入框 卡顿性能问题解决案
问题背景用el-table配合el-input直接渲染可编辑行,在数据量大的情况下,会出现输入卡顿的问题。原因分析el-input组件实例数量过多。el-input的v-model在表单输入时频繁触发更新事件。解决思路3. 用原生input替换el-input,以减少el-input组件实例。并在原生input上应用el-input的样式,使前者后者外观一致。在v-model指令上追加.lazy修饰符,使实例数据仅在失去焦点时更新,减少触发次数。此时光标进入输入框,执原创 2022-03-24 15:08:23 · 4763 阅读 · 0 评论 -
element-ui 下拉框数据太多导致卡顿、页面崩溃问题
1. 场景描述不知道你有没有这样的经历,下拉框的选项很多,上万个选项甚至更多,这个时候如果全部把数据放到下拉框中渲染出来,浏览器会卡死,体验会特别不好用人会说element-ui的select有一个remote-method,支持远程搜索,我们让服务端支持一下不就可以了,当然这是一种解决的方案。但是有时候这种方法有时候不一定适用(1)有时候服务端数据是经过计算返回给我们的,可能返回不是特别快,体验不是很好(2)有时候数据可能只有几千条,全部渲染又不太合适,一直掉接口不是特别好(3)仅仅通过前端能不转载 2022-03-09 09:40:44 · 5290 阅读 · 1 评论 -
实现在vue中element-ui的el-dialog弹框拖拽
1、在 utils 中新建 directives.js 文件import Vue from 'vue'// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-di转载 2022-02-21 16:40:21 · 265 阅读 · 0 评论 -
关于element-ui中Table表格如何合并单元格
第二步:代码开撸首先在data中新建变量data() { return { skuListInfo: [ // 假数据 { id: 1, name: '普通门店', storeIds: [1, 2, 3, 4], storeIdInfo: '[1, 2, 3, 4]', productType: '1', productInfo:.转载 2021-10-25 14:47:12 · 404 阅读 · 0 评论 -
element ui中表格输入框回车跳到另一输入框
<template> <div> <el-button @click="add">新增</el-button> <el-button @click="save">保存</el-button> <el-form id="table-form" ref="form" :rules="rules" :model="form"> <el-table ref="table" :data=.原创 2021-06-04 17:41:02 · 1395 阅读 · 0 评论 -
element ui中form表单某一项的快速过滤
formDatas:[{ show: true, disabled: false, loading: false, type: "selectRemote", label: "商品编号", value: "gdno", placeholder: "商品编号", // change: this.gdnoChange...原创 2021-04-23 13:28:54 · 269 阅读 · 0 评论