随笔——elmentUI的组件使用遇到的一些问题

    /* 加过渡给侧边导航 否则会有伸缩停顿的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'"

el-popover 样式修改不生效解决方法

   // 点击全选（包括所有父节点和子节点）
  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)
        }
      })
    },

(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'
      }],
  },

element 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)
    })
  }
},

开发过程最全的正则表达式匹配中英文、字母和数字

正则表达式的编写和校验
/^:起始
$/: 结束
[]:块，一般占一个字符的位置
():域
{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})$/

1. 使用改组件时，未添加查询条件时，如果在第二页、第三页、、、输入条件进行查询，此时请求会带当前的页数请求数据，如果返回的数据小于一页，则此时应该触发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();
 },

2. 但是如果我们所在第3页，输入查询条件点击查询，返回的是符合查询条件的pageNum为3的数据
3. 如果符合条件的数据只有一页，分页组件el-paginent当前页数自动跳到1，但是此时没有触发current-change事件，导致我们没有去调handleCurrentChange方法查第一页的数据，虽然页数显示1，但是数据为空

解决方法：使用watch监听替代组件自带的current-change方法，当queryParam.pageNum改变时触发查询
watch: {
    "queryParam.pageNum"(){
        this.listData();
    }
},

//初始化表格选中项方法的js
this.$nextTick(async()=>{
   await this.$refs.funTable;  //有时需要通过await等待 this.$refs.funTable加载完成，否则会在下面的方法中报toggleRowSelection方法未定义
    this.initTableData.forEach(item=>{
        this.$refs.funTable.toggleRowSelection(item,true);
    })
})

el-table常见的翻页勾选

1.设置row-key="id"唯一标识
2.设置勾选列:reserve-selection="true"保留选中项为true