1.el-menu菜单导航折叠的一些问题
1.解决伸缩过程中抖动问题:
/* 加过渡给侧边导航 否则会有伸缩停顿的bug*/
.el-aside {
transition: width 0.25s;
-webkit-transition: width 0.25s;
-moz-transition: width 0.25s;
-webkit-transition: width 0.25s;
-o-transition: width 0.25s;
}
/*加快侧边栏文字消失的速度 否则会有伸缩停顿的bug*/
.el-menu {
transition: all 10ms;
}
2.折叠后文字依然显示?
//确认是否按照格式编写
//<span slot="title"></span>是不可或缺的
//伸缩折叠时会自动江solt为title的内容识别为菜单标题的文字部分进行隐藏显示
<el-menu-item index="2">
<i class="el-icon-menu"></i>
<span slot="title">导航二</span>
</el-menu-item>
3.侧边栏宽度不变?
//给对应的需要和el-menu同步折叠的区域设置动态宽度
:width="isCollapse?'64px':'200px'"
2.el-popover 样式修改不生效解决方法
3.el-table树形数据多选全选的问题
(1)增加全选按钮,可以同时选中所有父节点和子节点
// 点击全选(包括所有父节点和子节点)
selectAll(){
let _this = this;
_this.checkedFlag = !_this.checkedKeys;
//将所有节点选中状态清空
_this.$refs.formTable.clearSelection();
if(_this.checkedKeys){ //如果是奇数次点击,更改所有节点的选中状态
_this.splite(_this.formTableData);
}
},
splite(data,flag){
data.forEach((row)=>{
this.$nextTick(()=>{
this.$refs.formTable.toggleRowSelection(row,flag);
})
if(row.children != undefined){
this.splite(row.children)
}
})
},
4.el-form表单自定义校验规则
(1)手机号码校验:
<el-form :model="editForm" :rules="editFormRules" ref="editForm">
<el-form-item label="手机号码" prop="phone">
<el-input v-model="editForm.phone" placeholder="请输入手机号码"></el-input>
</el-form-item>
</el-form>
data() {
const KHUtils = this.KHUtils;
const validateMobile = (rule, value, callback) => {
if (!KHUtils.isNull(value) && !KHUtils.isMobile(value)) {
callback(new Error('请输入正确的手机格式'));
} else {
callback();
}
};
return{
editFormRules:{
//方案一
phone: [
{max: 11, message: '请输入11位手机号码', trigger: 'blur'},
{validator: validateMobile, trigger: 'blur'}
],
//方案二
phone: [
{ required: true, message: "该项为必填项", trigger: "blur" },
{
pattern: /^1([38][0-9]|4[5-9]|5[0-3,5-9]|66|7[0-8]|9[89])[0-9]{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
],
}
}
}
isNull和isMobile方法都被封装到全局引入的js文件(即全局方法),具体如下:
//判断是否为手机号码
isMobile(T) {
// let reg = /^1[3|5|8][0-9]\d{4,8}$/;
let reg = /^1([34578])\d{9}$/;
return reg.test(T);
},
(2)另附数字类型表单项校验
editFormRules: {
//不推荐使用注掉的方法,此方法存在问题
// formId:[
// {type:'number',required: false ,message:'请输入数字类型',trigger:'blur'}
// ]
//推荐此方法
formId:[{
validator:(rule,value,callback)=>{
if(value != "" && value != null){
if((/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value) == false){
callback(new Error("请输入数字类型"));
}else{
callback();
}
}else{
callback();
}
},
trigger:'blur'
}],
},
5.el-tree组件每次重新获取数据后,节点状态重置收缩,想要保持节点的展开状态
思路有二:一是通过比较重新获取的树形数据和原树形数据差异,实现局部更新;而是使用el-tree的default-expanded-keys属性记录同步记录更新当前节点的展开情况,这里采用第二种方法。
<el-tree
ref="tree"
:data="treeList"
:default-expanded-keys="defaultExpandIds" //这个属性就是记录展开状态的
node-key="id" //这个属性不能漏掉
@node-expand="handleNodeExpand" // 展开节点时触发的函数
@node-collapse="handleNodeCollapse" // 关闭节点时触发的函数
>
</el-tree>
treeList: [], // 我的树结构数据
defaultExpandIds: [] // 这里存放要默认展开的节点 id
// 树节点展开
handleNodeExpand(data) {
// 保存当前展开的节点
let flag = false
this.defaultExpandIds.some(item => {
if (item === data.id) { // 判断当前节点是否存在, 存在不做处理
flag = true
return true
}
})
if (!flag) { // 不存在则存到数组里
this.defaultExpandIds.push(data.id)
}
},
// 树节点关闭
handleNodeCollapse(data) {
// 删除当前关闭的节点
this.defaultExpandIds.some((item, i) => {
if (item === data.id) {
this.defaultExpandIds.splice(i, 1)
}
})
this.removeChildrenIds(data) // 这里主要针对多级树状结构,当关闭父节点时,递归删除父节点下的所有子节点
},
// 删除树子节点
removeChildrenIds(data) {
const ts = this
if (data.children) {
data.children.forEach(function(item) {
const index = ts.defaultExpandIds.indexOf(item.id)
if (index > 0) {
ts.defaultExpandIds.splice(index, 1)
}
ts.removeChildrenIds(item)
})
}
},
6.正则表达式的语法和编写
正则表达式的编写和校验
/^:起始
$/: 结束
[]:块,一般占一个字符的位置
():域
{4,10}:长度限制,4到10个字符
(1)支持中文、英文、数字、下划线(_),且只能以英文或中文开头,长度为4~50个字符
/^([\u4e00-\u9fa5]|[a-zA-Z])([\u4e00-\u9fa5_a-zA-Z0-9_]{3,49})$/
(2)持英文、数字、下划线(_)、连字符,且只能以正斜线(/)开头,长度不超过200个字符,如/user
/^[/]([-a-zA-Z0-9_]{1,200})$/
7.el-paginant分页组件踩坑
- 使用改组件时,未添加查询条件时,如果在第二页、第三页、、、输入条件进行查询,此时请求会带当前的页数请求数据,如果返回的数据小于一页,则此时应该触发current-Change事件,将currentPage自动置为1,然而并没有
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="queryParam.pageNum"
:page-sizes="[10, 15, 20, 50]"
:page-size.sync="queryParam.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalCount"
style="margin-top:15px;float:right;">
</el-pagination>
//页数改变或者每页数据量大小改变时,都发送请求查询数据
handleSizeChange(val){
this.queryParam.pageSize = val;
this.listData();
},
handleCurrentChange(val){
this.queryParam.pageNum = val;
this.listData();
},
- 但是如果我们所在第3页,输入查询条件点击查询,返回的是符合查询条件的pageNum为3的数据
- 如果符合条件的数据只有一页,分页组件el-paginent当前页数自动跳到1,但是此时没有触发current-change事件,导致我们没有去调handleCurrentChange方法查第一页的数据,虽然页数显示1,但是数据为空
解决方法:使用watch监听替代组件自带的current-change方法,当queryParam.pageNum改变时触发查询
watch: {
"queryParam.pageNum"(){
this.listData();
}
},
8.带选择框的el-table初始化选中项
//初始化表格选中项方法的js
this.$nextTick(async()=>{
await this.$refs.funTable; //有时需要通过await等待 this.$refs.funTable加载完成,否则会在下面的方法中报toggleRowSelection方法未定义
this.initTableData.forEach(item=>{
this.$refs.funTable.toggleRowSelection(item,true);
})
})
9.el-table分页记忆的实现
1.设置row-key="id"唯一标识
2.设置勾选列:reserve-selection="true"保留选中项为true