element-ui开发问题记录（一）

Breadcrumb 面包屑

动态生成el-breadcrumb-item时，不能使用v-text,会导致图标分隔符失效，并且无法跳转；需使用双括号语法

<el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: $router.currentRoute.fullpath}">{{$router.currentRoute.name}}</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>

//后面的写法会导致图标分隔符失效，并且无法跳转
<el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: $router.currentRoute.fullpath}" v-text="$router.currentRoute.name"></el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
</el-breadcrumb>

当el-breadcrumb-item只有一个时，默认不能跳转

点击按钮 el-input 框 显示并自动聚焦

input框和按钮都是动态遍历生成的

<el-input size="mini" v-if="flag" v-model="input" @blur="inputBlur(item1)" autocomplete="on" placeholder="请输入内容" :ref="'ref'+item1.id"></el-input>
<el-button @click="btnClick(item1)">按钮</el-button>	

//按钮点击事件
btnClick(opt){
this.flag=true
this.$refs['ref'+opt.id][0].focus();
}

这么写的话input会显示，但是始终无法聚焦；解决方案

//按钮点击事件
btnClick(opt){
this.flag=true
setTimeout(()=>{
 	this.$refs['ref'+opt.id][0].focus();
})
}

这样就好了，具体原因不清楚；可能是渲染速度的问题

el-tree的展开和关闭图标问题

项目中UI设计图纸有一个树形目录，但是icon图标和element默认图标不一致；一开始想通过修改源代码换掉，找了半天找到了，但是element打开和关闭做的不是图标切换，而是图标旋转，没办法只能自己写一个
下面是代码，支持新建目录,最多只支持三级；第三级不提供新建目录功能

<template>
  <div class="tree">
    <div  class="treeChild">
      <div class="childList" v-for="item1 in dataList">
        <div class="title_all">
          <span :class="{'icon':true,'active':item1.flag}" @click="iconClick(item1)" v-if="item1.children&&item1.children.length" v-text="item1.flag?'+':'-'"></span>
          <span :class="{title:true,active:item1.label===activeLabel,all:true}" v-text="item1.label" @click="nodeClick(item1)"></span>
          <span class="createTreeNode" title="新建文件" v-show="createNodeBtnFlag&&!nodeCreating" @click="createTreeNode(item1)">+</span>
        </div>
        <div class="children childrenFirst" v-show="!item1.flag">
          <div v-for="item2,index2 in item1.children" :class="{childList:true,'last_child':index2===item1.children.length-1}">
            <div class="title_header" @mouseenter="createTreeBtnShow(item2)" @mouseleave="createTreeBtnHide(item2)">
              <span :class="{'icon':true,'active':item2.flag}" @click="iconClick(item2)" v-if="item2.children&&item2.children.length" v-text="item2.flag?'+':'-'"></span>
              <span :class="{title:true,active:item2.label===activeLabel}" v-text="item2.label" @click="nodeClick(item2)"></span>
              <span class="createTreeNode" title="新建文件" v-show="item2.createNodeBtnFlag&&!nodeCreating" @click="createTreeNode(item2)">+</span>
            </div>
            <div class="children" v-show="!item2.flag">
              <div v-for="item3,index3 in item2.children" :class="{childList:true,'last_child':index3===item2.children.length-1}">
                <div class="title_header" @mouseenter="createTreeBtnShow(item3)" @mouseleave="createTreeBtnHide(item3)">
                  <span :class="{'icon':true,'active':item3.flag}" @click="iconClick(item3)" v-if="item3.children&&item3.children.length" v-text="item3.flag?'+':'-'"></span>
                  <span :class="{title:true,active:item3.label===activeLabel}" v-text="item3.label" @click="nodeClick(item3)"></span>
                  <span class="createTreeNode" title="新建文件" v-show="item3.createNodeBtnFlag&&!nodeCreating" @click="createTreeNode(item3)">+</span>
                </div>
                <div class="children" v-show="!item3.flag">
                  <div v-for="item4,index4 in item3.children" :class="{childList:true,'last_child':index4===item3.children.length-1}">
                    <div class="title_header">
                      <span :class="{'icon':true,'active':item4.flag}" @click="iconClick(item4)" v-if="item4.children&&item4.children.length" v-text="item3.flag?'+':'-'"></span>
                      <span :class="{title:true,active:item4.label===activeLabel}" v-text="item4.label" @click="nodeClick(item4)"></span>
                    </div>
                  </div>
                  <div class="createTreeNodeInput" v-show="item3.createNodeFlag" >
                    <el-input size="mini" v-model="input" @blur="inputBlur(item3)" autocomplete="on" placeholder="请输入内容" :ref="'ref'+item3.id"></el-input>
                  </div>
                </div>
              </div>
              <div class="createTreeNodeInput" v-show="item2.createNodeFlag" >
                <el-input size="mini" v-model="input" @blur="inputBlur(item2)" autocomplete="on" placeholder="请输入内容" :ref="'ref'+item2.id"></el-input>
              </div>
            </div>
          </div>
          <div class="createTreeNodeInput" v-show="item1.createNodeFlag" >
            <el-input size="mini" v-model="input" @blur="inputBlur(item1)" autocomplete="on" placeholder="请输入内容" :ref="'ref'+item1.id"></el-input>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        dataList : [],
        input:"",
        activeLabel : "全部图片",
        createNodeBtnFlag:true,
        nodeCreating:false,
      }
    },
    props : ['data'],
    computed : {},
    methods : {
      //触发数形目录点击事件
      nodeClick(opt){
        this.activeLabel = opt.label;
        this.$emit('node-click', opt)
      },
      //展开与关闭
      iconClick(opt){
        opt.flag = !opt.flag;
        this.dataList = JSON.parse(JSON.stringify(this.dataList))
      },
      //点击新建目录按钮
      createTreeNode(opt){
        this.nodeCreating=opt.createNodeFlag = true;
        this.dataList = JSON.parse(JSON.stringify(this.dataList));
        setTimeout(()=>{
          console.log(this.$refs['ref'+opt.id][0]);
        this.$refs['ref'+opt.id][0].focus();
        })
      },
      //新建目录input框失去焦点事件
      inputBlur(opt){
        if(this.input){
          this.$emit('createTreeNode', opt,this.input);
          this.input="";
        }
        this.nodeCreating= opt.createNodeFlag = false;
        this.dataList = JSON.parse(JSON.stringify(this.dataList))
      },
      //新建目录按钮显示
      createTreeBtnShow(opt){
        this.createNodeBtnFlag=false;
        opt.createNodeBtnFlag=true;
        this.dataList = JSON.parse(JSON.stringify(this.dataList))
      },
      //新建目录按钮隐藏
      createTreeBtnHide(opt){
        this.createNodeBtnFlag=true;
        opt.createNodeBtnFlag=false;
        this.dataList = JSON.parse(JSON.stringify(this.dataList))
      }
    },
    mounted(){
      this.dataList = this.data;
    }
  }
</script>

<style scoped>
  .tree{
    width:100%;
    height:100%;
    position:relative;
    overflow:hidden;
  }
  .treeChild{
    overflow:auto;
    width:100%;
    height:100%;
  }
  .icon{
    width:11px;
    height:11px;
    text-align:center;
    line-height:11px;
    border:1px solid #ccc;
    display:inline-block;
    font-size:14px;
    color:#ccc;
    margin:0 6px;
    cursor:pointer;
    position:relative;
    background-color:#fff;
  }
  .title{
    color:#333;
    font-size:14px;
    line-height:30px;
    cursor:pointer;
    display:inline-block;
    padding:0 5px;
    white-space:nowrap;
  }
  .title.active{
    color:#377ee8;
    background-color:#e6e6e6;
  }
  .title.all{
    background-color:#e6e6e6;
    height:30px;
    padding:0 5px;
  }
  .title_all{
    padding-right:30px;
  }
  .title_header{
    white-space:nowrap;
    width:100%;
    box-sizing:border-box;
    padding-right:30px;
    background:linear-gradient(to right, #eaedf1, #eaedf1) no-repeat left center;
    background-size:20px 1px;
  }
  .title_header .icon{
    left:-13px;
  }
  .children{
    margin-left:30px;
    background:linear-gradient(to bottom, #eaedf1, #eaedf1) no-repeat left top;
    background-size:1px 5px;
    padding-top:5px;
  }
  .children.childrenFirst{
    margin-left:50px;

  }
  .children .childList{
    background:linear-gradient(to bottom, #eaedf1, #eaedf1) no-repeat left top;
    background-size:1px 100%;
  }
  .children .last_child{
    background-size:1px 15px;
  }
  .createTreeNode{
    padding:0 10px;
    height:30px;
    vertical-align:middle;
    /*margin-right:15px;*/
    font-size:24px;
    cursor:pointer;
    background-color:#fff;
    position:absolute;
    right: 0;
  }
  .createTreeNodeInput{
    height:30px;
    padding:0 10px;
    line-height:20px;
  }
</style>

组件调用

<Tree :data="treeData" @node-click="treeNodeClick" @createTreeNode="createTreeNode"></Tree>

data树状图的数据结构，这里没有做设置；写死了，可以自己设置

data:[{
	label:"目录"，
	children:[]
}]

node-click节点点击事件 createTreeNode新建节点事件