el-table树形结构踩坑汇总

1.element的:tree-props=“{ children: ‘children‘,hasChildren: ‘hasChildren‘ }“里面的坑

数据里面必须用children用其他字段都不行，children: 'children'这里改了没用

2.如果树节点想要默认展开，default-expand-all不起作用，需要写方法实现

  // 表格树形默认展开
    expandAll () {
      var els = document.getElementsByClassName('el-table__expand-icon') //获取点击的箭头元素
      for (let i = 0; i < els.length; i++) {
        els[i].click()
      }
    },

每次获取完接口数据后调用expandAll方法刷新，但是要注意这个其实还不够，因为数据获取后直接调用页面还没更新完成，需要用$nextTick等数据更新完成后再展开节点

 this.$http({
        url: this.API.findTree,
        method: 'post',
        data: this.search
      })
        .then(res => {
          if (res.data.code === this.API.SUCCESS) {
            this.tableData = res.data.body
            this.$nextTick(() => {
              this.expandAll()
            })
          }
        })
        .catch(_ => {})
        .finally(res => {
          this.listLoading = false
        })

3.双层表头以及表头超出一行显示省略号，鼠标上移显示

 <el-table-column
        show-overflow-tooltip
        :label="item1.roleName"
        v-for="(item1, index) in headers"
        width="240"
        :key="index"
      >
        <el-table-column show-overflow-tooltip :prop="item1.id" :label="item1.userNames">
          <template slot="header" slot-scope="scope">
<!-- slot-scope="scope"这句必须有，没有就不会生效，虽然我也不知道为啥 -->
            <!-- <el-popover trigger="hover" placement="top">
              <span>{{ item1.userNames }}</span>
              <div
                slot="reference"
                style="width:100%;padding: 0px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;line-height:14px;vertical-align: middle;"
              >
                <span>{{ item1.userNames }}</span>
              </div>
            </el-popover> -->
            <el-tooltip effect="dark" :content="item1.userNames" placement="top">
              <div
                style="width:100%;padding: 0px;overflow:hidden;text-overflow:ellipsis;white-space: nowrap;"
              >{{item1.userNames}}</div>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            <div>
              <span v-if="scope.row[item1.id] === 'Y'" class="el-icon-check f24 green-text fw800"></span>
              <span
                v-else-if="scope.row[item1.id] === 'N'"
                class="el-icon-close f20 red-text fw800"
              ></span>
              <span v-else></span>
            </div>
          </template>
        </el-table-column>
      </el-table-column>

el-table-column里面套el-table-column可以实现多级表头

通过插槽header，设置样式结合popover弹框或者tooltip都可以实现表头超出一行省略号，鼠标上移显示