随笔分类 - element
一个优秀的前端UI库
摘要：1、问题：在element-plus的tabs栏里切换位置，但是数据更新后视图不更新，删除和新增是可以更新的 如下例子 <script setup > let tabs = reactive(['first', 'second', 'third', 'fourth']) let activeName
阅读全文
摘要：1、问题： element-plus中icon跟element中的icon完全不同，使用也很多变化，最重要的一点就是按需动态加载了，主要用到unplugin-icons这个库 根据按需加载icon的使用方法，是无法满足动态加载的 <template> <IEpPlus /> </template>
阅读全文
摘要：全局安装和自动按需安装后的使用方法： 到官网图标集合： https://element-plus.gitee.io/zh-CN/component/icon.html#%E5%9B%BE%E6%A0%87%E9%9B%86%E5%90%88 点击图标复制，直接在页面中使用：例如第一个： <el-ic
阅读全文
摘要：1、问题：当element表单里面只有一个input的时候回车会刷新页面 2、原因：当el-form表单里面只有一个input时，回车会触发表单提交的默认事件 3、解决：阻止表单提交的默认事件 在表单处加上@submit.native.prevent <el-form class="main_hea
阅读全文
摘要：1、介绍：vue3+ts项目引入ElementPlus的方式有几种，一个是完整引入，一个是官方推荐的自动导入，最后一个是手动导入 2、实操：这里展示前面两种，最后的手动导入不是很推荐，这里就不介绍了 2-1、完整引入，官方案例：element-plus-vite-starter 引入ElementP
阅读全文
摘要：提交方法： 接口经常要用到FormData提交文件，就记录一下 实现：new一个FormData类型，append如文件，提交的时候给接口请求头加上'Content-Type': 'multipart/form-data' upData(file){ const form = new FormDat
阅读全文
摘要：1、需求：用户需要在两个缓存的页面切换查看数据，但是在keep-alive里面的element的滚动条会自动置顶。 2、思路：利用自定义指令给element的表格绑定，监听滚动条变化并记录，同时设置一个变量记录页面并在路由切换时刷新，当页面滚动时记录页面和页面table的位置，当路由切换时就把当前记
阅读全文
摘要：1、简介：在优化一个页面时发现popper太多太乱，有好几种使用方法，就想着归纳总结一下 2、方式 2-1、直接使用，触发的dom是直接包在里面的，适用于单个少量元素，比如说一个页面就一个按钮需要弹出来 <el-popover placement="bottom" title="标题" width=
阅读全文
摘要：1、全局设置了hover高亮发现固定列的表格不起作用 .el-table--enable-row-hover .el-table__body tr:hover > td, .el-table__body tr.current-row > td, .el-table--striped .el-tabl
阅读全文
摘要：1、简介：项目需求要弄一个数据录入表格，数据比较多并且是可编辑，按键切换输入框，左侧固定列等等，一开始表格是直接用的element，用着用着已经不满足需求，编辑数据多的时候慢的不行编辑还卡顿。 2、解决经历：一开始是打算用patch-package修改element源码的，然后发现引入的elemen
阅读全文
摘要：1、思路：通过设置html的data-theme属性来设置主题，利用css属性选择器判断识别，设置不同主题的sass变量，再利用sass的混和指令和样式来设置不同主题的主题色。 2、实现： 2-1、先在html上绑定data-theme属性，设置默认主题 <html lang="" data-the
阅读全文
摘要：1、需求：当用户打开多个页面的时候，tab还要手动一个个点击删除就很麻烦，就需要一个批量删除的功能，比如右击弹出一个菜单进行批量删除 2、思路： 2-1、先弄一个全局定位的菜单模块，隐藏掉 2-2、给tabs绑定一个虚拟dom，获取它里面的子dom列表，因为游览器右击会有默认菜单，所以需要对子dom
阅读全文
摘要：1:、需求：用户在处理大量数据表格的时候用鼠标一个个点很麻烦，于是想要按键移动编辑改完按方向键移动编辑下一个 2、思路：简单来说就是利用input的blur()和focus()方法，我这里用了element组件，原生也差不多，按键的时候focus下一个要移动的dom，blur之前的dom，就可以完成
阅读全文
摘要：问题：新增订单列表需要按打印单号的顺序保存，表格是前端排序，现在需要是获取点击排序后+增删改操作后的表格数据 解决： 先设置ref为tableData绑定该表格this.$refs.tableData.tableData就是每次你排序之后的数据
阅读全文
摘要：展示超出省略部分 实现 html部分 ...省略 <span @mouseover="spill(...arguments, item.materialSn)" @mouseout="closePopover"> {{ item.materialSn }} </span> ...省略 <el-pop
阅读全文
