使用element-ui的el-tree组件

一：使用element-ui框架遇到的问题

1.引用el-tree树形控件的时候

实现点击每一级树都添加一个类名

html代码
<span
   class="custom-tree-node"
   :class="{'hoverClass':colorINdex === data.id}"
    slot-scope="{ node, data }"
    :key="data.id"
>
    <span
         class="labelSpan"
          @click="toProductType(data)"
     >{{ data.name }} {{data.id}} {{node.id}}</span>
  js代码：methods
  toProductType(data) {
      this.colorINdex = data.id
    }

即点击的时候：colorINdex === data.id
样式图·

效果图：

不过，如果是从后台获取的数据，有两种数据插入到tree中的时候，就会有两种id，那如果id一样的时候就会出现点击出现两个效果：如下图

解决方法：将两种id区分开来

  class="custom-tree-node"
              :class="{'editing':(data.groupId?groupColorIndex:curIndex) === (data.groupId?data.groupId:data.id), 'hoverClass':(data.groupId?groupIndex:colorINdex) === (data.groupId?data.groupId:data.id)}"
              slot-scope="{ node, data }"
              :key="data.id"
            >
 并且判断
 toProductType(data) {
      // console.log(data)
      if (data.groupId) {
        this.groupIndex = data.groupId
        this.colorINdex = ''
      } else {
        this.colorINdex = data.id
        this.groupIndex = ''
      }
    },
  并且需要在不同的id的情况下清空其他的index，否则会出现点击以后，类名不消除。

2.在引用其他的组件的时候

比如：

          <el-form
             :model="tableData"
              ref="tableData"
              :rules="rules"
              label-width="100px"
              class="demo-ruleForm"
            >
                 <el-form-item v-for="(item) in tableData">
                    <label>{{item.description}}</label>
                    <el-input type="text" v-model="item.value" autocomplete="off"></el-input>
                  </el-form-item>
            </el-form>
tableData:是一个对象数组，可是在el-form需要引用对象类型的数据，会报错
因为已经通过v-for渲染了数据，这个时候 :model已经没有作用了，反而影响了数据类型的错误出现
只要去掉":model"就行,不用绑定。
有时候只要引用框架的样式的时候，其他的一些属性都可以不要，否则容易出现一些问题

3.element-ui Input 标签后加搜索图标

<el-form ref="form" :model="form">
  <el-input v-model="form.name" placeholder="请输入名称"
            suffix-icon="el-icon-search"></el-input>
</el-form>

suffix-icon 在搜索框后加入图标
prefix-icon 在搜索框头部加入图标

4.element-ui 的el-tree树形控件

:default-expanded-keys="[openId]"
:key="data.id"
默认展开的节点的 key 的数组,openId要为data.id

5.element-ui的el-tree的树形控件的一一对应问题

<span
              class="custom-tree-node"
              :class="{'editing':curIndex === data.id, 'hoverClass':colorINdex === data.id}"
              slot-scope="{ node, data }"
              :key="data.id"
            >
              <!-- @dblclick="tableDbEdit" -->
              <span
                class="labelSpan"
                @click="toProductType(data)"
              >{{ data.name }} {{data.id}} {{node.id}}</span>
              <input
                type="text"
                id="input-label"
                class="text2 el-input__inner"
                v-model="data.name"
                @blur="edited(data)"
                @focus="editBefore(data.name)"
                @keyup.enter="edited"
                :key="node.id"
                v-focus
              />
              <span>
                <el-button type="text" size="mini" @click="() => update(data)">修改</el-button>
                <el-button type="text" size="mini" @click="() => append(data)">+</el-button>
                <el-button type="text" size="mini" @click="() => remove(node,data)">x</el-button>
              </span>
            </span>

在树形控件渲染页面如下图：

即data数据里面每一个对象都会生成下图的样式，且后面的按钮（updata，append，remove）和每一个data对象一一对应
在methods：append(data, node){}引用，这个data就是当前的data数据，而this.data就是本地所有的data数据
this.data查出的是数据如下图：

data查出的数据如下图：当前data的数据

所以要在最外面的span标签里面就能够查询到当前的data

6.el-table表格出现错位的问题，以及表格居中

/* 表格对齐 */
/* 对齐表格，解决表格错位的问题 */
.el-table th.gutter{
  display: table-cell !important
}
/* 表格每一个单元格居中显示 */
.el-table .cell{
  text-align: center;
}