vue+element相关
vue+element项目一些记录
xt_XiTu
这个作者很懒,什么都没留下…
展开
-
vue实现element-ui对话框dialog可拖拽功能
使用时直接在el-dialog标签中加上 v-dialogDrag 即可。业务中有支持弹窗拖拽的需求,根据网上搜到的内容实现了,整理记录一下。创建directives.js文件。在main.js中引入。原创 2022-11-15 10:07:20 · 572 阅读 · 1 评论 -
element Tree树形控件使用记录
需求为使用弹窗选择区域,弹窗左侧为待选区,右侧会展示当前已选中项,也是树形控件展示,如果打开弹窗时上次有选中数据,需要展示出来并勾选相应树形节点1、html及配置项、数据源部分由于需求中有需要主动设置选中项,所以需要设置node-key项<el-tree ref="tree" :data="data" node-key="areaCode" :props="defaultProps" show-checkbox render-after-expand @check-change=原创 2020-07-22 15:22:56 · 331 阅读 · 0 评论 -
用vue+element实现表格键盘上下键单选中行效果
使用element的table组件,如果还想要实现上下键选中行效果的话,可以试试以下方法,主要是通过监听键盘事件实现的如果还需要表格上下键时保持被选中行一直在视野中的话,可以在监听事件中根据当前行的位置动态设置表格的滚动距离实现,现在先不加了,等有时间再完善1、首先定义一个变量,来确定当前被点击行的index,再根据监听到的是上键或者下键,递减或递增此变量,通过element table的toggleRowSelection方法实现对当前行的勾选选中,具体代码作用已在备注中代码如下:keyUp(e)原创 2020-06-19 10:35:44 · 3259 阅读 · 2 评论 -
element table组件实现shift选中区间行之后,选中行的文字也被选中怎么办
我的解决办法简单粗暴,直接在vue项目文件中的app.vue文件内,监听shift的键盘按下抬起事件,改变当前整个项目的userSelect样式即可代码如下:mounted(){ addEventListener("keydown", this.keyDown, false); addEventListener("keyup", this.keyUp, false); }, beforeDestroy() { //解绑 removeEventListe原创 2020-06-18 10:31:55 · 609 阅读 · 0 评论 -
element表格实现溢出隐藏单元格增加复制按钮
element表格实现溢出隐藏单元格增加复制按钮此功能可以实现只写一个公共复制按钮,可以在多个页面的表格中使用,用到了vuex、clipboard,如果不想使用vuex,则需要想办法把复制按钮的位置x、y坐标写成公共的变量1、复制按钮如果整个项目有公共的入口文件,可以放在里面,或者可以直接放在app.vue中,copyX,copyY为当前复制按钮所处位置,为固定定位展示<template> <div id='app'> <router-view><原创 2020-06-01 10:55:36 · 987 阅读 · 0 评论 -
根据页面高度变化动态改变element的table组件的最大高度
本文提供方法,主要用来解决流体高度的element的表格组件,还需要根据页面高度变化而变化最大高度js部分定义方法后需要在页面刚刚创建时就调用一次,使表格获得合适的初始表格高度再监听页面resize事件function listenWindow() { let height = 100 // height主要用来计算页面中除了表格外其他部分的固定的高度 let tableHeight = document.getElementById('app').offsetHeight - heig原创 2020-06-01 11:19:06 · 1569 阅读 · 0 评论 -
element的表格组件展示的data中嵌套了对象无法展示怎么办
使用element表格组件时,一般只需要展示数据源中的各个字段即可,但是最近遇到了一个需要展示的数据中有些是数据源中的对象中的元素,这个开始是scope.row.xxx.yyy形式写的,也可以正常使用,但突然有一天开始报错TypeError: Cannot read property ‘goodsNo’ of nullat fn (eval at ./node_modules/_cache-loader@2.0.1@cache-loader/dist/cjs.js?{“cacheDirectory”:“原创 2020-06-03 11:03:02 · 1742 阅读 · 1 评论 -
element表单校验多个组件以及校验不确定个数组件的校验方法
由于需求实在太**,只能把一个大表单分成多个子组件、孙组件甚至重孙组件再去校验,而且其中孙组件还是不确定个数的,(;′⌒`),用到了element的表单校验以及Promise.all1、首先在各个组件页面写好能主动触发的校验方法,我是统一都写成一个方法名各个页面区别主要是,最底层的重孙组件只按照正常的校验写就行,其他上级组件的方法中需要根据下级组件返回结果确定promise出去的结果重孙组件validateData() { // 校验 return new Promise((resolve, r原创 2020-06-12 16:23:16 · 950 阅读 · 1 评论 -
js数组去重常用方法
数组去重是很容易用到的一个功能,前端去重方法也有很多,这里记录几种常用的方法,使用的场景也稍有区别,可根据实际需求选取最合适的方法1、for循环嵌套,配合使用splice最常用方法、兼容性比较高,也适合去重时是根据数组中元素的某一项去重或者某几项去重时使用此例为根据数组中数据的某一项去重let arr = [ {name: '张三', age: 10}, {name: '李四', age: 20}, {name: '张三', age: 10}, {name: '王五', age: 1原创 2020-06-15 10:50:59 · 170 阅读 · 0 评论