vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查

以下代码可以直接复制使用

一、情景： 列表是一个树状表格，可以无限添加下级，以及对列表的某一行进行增删改查（目前查没有写）。

原博链接

二、本篇是在原博主的代码基础上添加了部分功能。
功能1： 给树状表格添加虚线部分，可以更清楚树节点层级关系
功能2： 某行数据可以直接输入框编辑，也可以点击编辑按钮打开弹框编辑
功能3： 我这里树状节点一共有三种：
–①顶级根节点first： 只会有最外层一个 默认就有的 可以添加下级【夹】、【页】节点
–②中间夹节点middle： 通过点击【夹】节点按钮添加来的，可以继续添加下级【夹】、【页】
–③末梢页节点last： 不会再有下级。只有它才有数据展示
–总结就是 中间的【夹】可以无限添加下级，【页】就是末梢节点不能添加下级。每行的数据有个字段farOrSon来判断是属于什么节点。然后展示对应的图标。

三、部分代码详解：
–①功能其实还是使用element树形数据与懒加载，不过原博主写的更详细、功能更全，感谢！

–②表格的ref值cimsDictTable是只能给一个表格设置，否则会造成错误

–③树状表格自动展开属性是 default-expand-all ，去掉这个属性就是默认关闭的
–④:tree-props="{children:‘childNode’}" 这个childNode是你自己表格的树节点嵌套的那个字段；我的数据结构就是，childNode数组有值就是有下级，strObj有值就是右边的输入框数字。然后我的数据要求是childNode有值既有下级时候，strObj就是null。相反的strObj有值时候，childNode就是[]。所以你看到我的，【夹】都是没数据，【页】才是有数据的。如果你的要求是【夹】和【页】都有数据，既列表每行都有数据。那么你的strObj就要一直有值。
–⑤我的表格是多级表头，就是在 el-table-column 里面嵌套 el-table-column，具体看这个介绍，无论单级多级，其实数据结构是一样的对象数组，一行数据就是一个对象。
–⑥目前我的添加【夹】、【页】都是直接就加了一行，只有编辑是通过弹框修改。其实添加也可以使用这个弹框来做，逻辑可以参照编辑的。既添加记住是添加在哪个id数据下，点击缺点后，递归遍历找到这个数据将弹框值赋值给它修改既可以。
–⑦目前条件这行是设置了取列表剩余宽度。其实也可以给这列设置自适用撑开的宽度，看这篇自适应展开宽度
–⑧虚线部分是我自己计算写的样式，搜索scope.row.level这个代码就可以看到逻辑。
–⑧①首先是先计算每个行嵌套的层级level，例如【9527】这个就是嵌套了3层，就有三个竖着的虚线，遍历生成三个间距是16px的竖虚线；但是这三条虚线有可能前面的1、2条需要根据delItemFlag删除，然后虚线上移高度一半。这样你看到的一条条很长的竖线，其实是每行的竖线链接在一起形成的。
–⑧②行高时候，当前行的虚线也会多出来一截，故需要给每层嵌套的最后一行多设置个白色竖线，去遮挡多余的一截
–⑧③最后给每行设置横线虚线即可
下图就是设置虚线遇到的问题，不过目前已经解决了

以下代码可直接复制使用

<template>
  <div class="a_tree_box">

    <div>
      <el-table
        ref="cimsDictTable"
        default-expand-all
        :data="tableData"
        style="width: 100%"
        row-key="id"
        border
        stripe
        size="mini"
        class="data-table"
        tooltip-effect="dark"
        header-row-class-name="data-table-header"
        lazy
        :show-overflow-tooltip="true"
        :load="load"
        :tree-props="{children:'childNode'}"
        @selection-change="handleSelectionChange"
        @select="select22"
        @select-all="selectAll"
      >
        <el-table-column label="条件" min-width="400px">
          <template slot-scope="scope">

            <!-- 这部分是设置虚线逻辑 -->
            <template v-for="(item,l) in scope.row.level">
              <!-- 根据delItemFlag判断 是true或者'true'则对应的竖虚线是多余的 需要删除 -->
              <span v-if="scope.row.delItemFlag[l] == 'false'" :key="l+1" class="l_bor1_box" :style="{'left':`${(l+1)*16 - 6}`+'px'}"></span>
              <!-- 这个是设置横的虚线 -->
              <span v-if="l == (scope.row.level -1)" :key="(l+1)*10000" class="l_bor2_box" :style="{'left':`${(l+1)*16 - 6}`+'px'}"></span>
            </template>
            <!-- 这个是设置每个层级最后的那个节点 多加一个竖线 覆盖多余的行高虚线 -->
            <span v-if="scope.row.moreOneDash" class="more_dash" :style="{'left':`${(scope.row.level)*16 - 6}`+'px'}"></span>

            <span class="showName">{
  { scope.row.conditionName }}</span>
            <i v-if="scope.row.farOrSon=='first'|| scope.row.farOrSon=='middle'" style="font-size:18px;margin-left:5px;color:#00ff00;cursor: pointer;" class="el-icon-folder-add" @click="addOneRow(scope.row,scope.$index,'middle')"></i>
            <i v-if="scope.row.farOrSon=='first'|| scope.row.farOrSon=='middle'" style="font-size:18px;margin-left:5px;color:#00ff00;cursor: pointer;" class="el-icon-document-add" @click="addOneRow(scope.row,scope.$index,'last')"></i>
            <i v-if="scope.row.farOrSon=='middle'|| scope.row.farOrSon=='last'" style="font-size:18px;margin-left:5px;color:#f1ff;cursor: pointer;" class="el-icon-edit" @click="editRow(scope.row,scope.$index)"></i>
            <i v-if="scope.row.farOrSon=='middle'|| scope.row.farOrSon=='last'" style="font-size:18px;margin-left:5px;color:#1890FF;cursor: pointer;" type="primary" class="el-icon-close" @click="delRow(scope.row,scope.$index)"></i>

          </template>
        </el-table-column>
        <el-table-column label="交强险（%）">
          <el-table-column label="上游" width="70px">
            <template slot-scope="scope">
              <el-input v-if="scope.row.strObj" v-model="scope.row.strObj.str1" placeholder @input="scope.row.strObj.str1=/^d+.?d{0,2}$/.test(scope.row.strObj.str1)||scope.row.strObj.str1 == '' ? scope.row.strObj.str1 : scope.row.strObj.str1=''"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="基数" width="70px">
            <template slot-scope="scope">
              <el-input v-if="scope.row.strObj" v-model="scope.row.strObj.str2" placeholder @input="scope.row.strObj.str2=/^d+.?d{0,2}$/.test(scope.row.strObj.str2)||scope.row.strObj.str2 == '' ? scope.row.strObj.str2 : scope.row.strObj.str2=''"></el-input>
            </template>
          </el-table-c