vue+element实现树状表格的增删改查；使⽤el-table树形数据与懒加载实现树
状。。。
以下代码可以直接复制使⽤
⼀、情景： 列表是⼀个树状表格，可以⽆限添加下级，以及对列表的某⼀⾏进⾏增删改查（⽬前查没有写）。
⼆、本篇是在原博主的代码基础上添加了部分功能。
功能1： 给树状表格添加虚线部分，可以更清楚树节点层级关系
功能2： 某⾏数据可以直接输⼊框编辑，也可以点击编辑按钮打开弹框编辑
功能3： 我这⾥树状节点⼀共有三种：
–①顶级根节点first： 只会有最外层⼀个 默认就有的 可以添加下级【夹】、【页】节点
–②中间夹节点middle： 通过点击【夹】节点按钮添加来的，可以继续添加下级【夹】、【页】
–③末梢页节点last： 不会再有下级。只有它才有数据展⽰
–总结就是 中间的【夹】可以⽆限添加下级，【页】就是末梢节点不能添加下级。每⾏的数据有个字段farOrSon来判断是属于什么节点。然后展⽰对应的图标。
三、部分代码详解：
–①功能其实还是使⽤，不过原博主写的更详细、功能更全，感谢！
–②表格的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数据下，点击缺点后，递归遍历到这个数据将弹框值赋值给它修改既可以。
–⑦⽬前条件这⾏是设置了取列表剩余宽度。其实也可以给这列设置⾃适⽤撑开的宽度，
–⑧虚线部分是我⾃⼰计算写的样式，搜索w.level这个代码就可以看到逻辑。
–⑧①⾸先是先计算每个⾏嵌套的层级level，例如【9527】这个就是嵌套了3层，就有三个竖着的虚线，遍历⽣成三个间距是16px 的竖虚线；但是这三条虚线有可能前⾯的1、2条需要根据delItemFlag删除，然后虚线上移⾼度⼀半。这样你看到的⼀条条很长的竖线，其实是每⾏的竖线链接在⼀起形成的。
–⑧②⾏⾼时候，当前⾏的虚线也会多出来⼀截，故需要给每层嵌套的最后⼀⾏多设置个⽩⾊竖线，去遮挡多余的⼀截
–⑧③最后给每⾏设置横线虚线即可
下图就是设置虚线遇到的问题，不过⽬前已经解决了
以下代码可直接复制使⽤
<template>
<div class="a_tree_box">
<div>
<el-table
ref="cimsDictTable"
default-expand-all
:data="tableData"
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) w.level">
<!-- 根据delItemFlag判断是true或者'true'则对应的竖虚线是多余的需要删除 -->
<span v-if="w.delItemFlag[l] == 'false'" :key="l+1" class="l_bor1_box" :></span>
<!-- 这个是设置横的虚线 -->
<span v-if="l == (w.level -1)" :key="(l+1)*10000" class="l_bor2_box" :></span>
</template>
<!-- 这个是设置每个层级最后的那个节点多加⼀个竖线覆盖多余的⾏⾼虚线 -->
<span v-if="OneDash" class="more_dash" :></span>
<span class="showName">{{ ditionName }}</span>
<i v-if="w.farOrSon=='first'|| w.farOrSon=='middle'" class="el-ic on-folder-add" @click="w,scope.$index,'middle')"></i>
<i v-if="w.farOrSon=='first'|| w.farOrSon=='middle'" class="el-ic on-document-add" @click="w,scope.$index,'last')"></i>
<i v-if="w.farOrSon=='middle'|| w.farOrSon=='last'" class="el-icon-edit" @click="w,scope.$index)"></i>
<i v-if="w.farOrSon=='middle'|| w.farOrSon=='last'" type="pri mary" class="el-icon-close" @click="w,scope.$index)"></i>
</template>
</el-table-column>
<el-table-column label="交强险（%）">
<el-table-column label="上游" width="70px">
<template slot-scope="scope">
element表格横向滚动条<el-input v-if="w.strObj" v-model="w.strObj.str1" placeholder @input="w.strObj.str1=/^d+.?d{0,2}$/.w.strObj .str1)||w.strObj.str1 == '' ? w.strObj.str1 : w.strObj.str1=''"></el-input>
</template>
</el-table-column>
<el-table-column label="基数" width="70px">
<template slot-scope="scope">
<el-input v-if="w.strObj" v-model="w.strObj.str2" placeholder @input="w.strObj.str2=/^d+.?d{0,2}$/.w.strObj .str2)||w.strObj.str2 == '' ? w.strObj.str2 : w.strObj.str2=''"></el-input>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="车船险（%）">
<el-table-column label="上游" width="70px">
<template slot-scope="scope">
<el-input v-if="w.strObj" v-model="w.strObj.str3" placeholder @input="w.str
Obj.str3=/^d+.?d{0,2}$/.w.strObj .str3)||w.strObj.str3 == '' ? w.strObj.str3 : w.strObj.str3=''"></el-input>
</template>
</el-table-column>
<el-table-column label="基数" width="70px">
<template slot-scope="scope">
<el-input v-if="w.strObj" v-model="w.strObj.str4" placeholder @input="w.strObj.str4=/^d+.?d{0,2}$/.w.strObj .str4)||w.strObj.str4 == '' ? w.strObj.str4 : w.strObj.str4=''"></el-input>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="商业险（%）">
<el-table-column label="上游" width="70px">
<template slot-scope="scope">
<el-input v-if="w.strObj" v-model="w.strObj.str5" placeholder @input="w.strObj.str5=/^d+.?d{0,2}$/.w.strObj .str5)||w.strObj.str5 == '' ? w.strObj.str5 : w.strObj.str5=''"></el-input>
</template>
</el-table-column>
<el-table-column label="基数" width="70px">
<template slot-scope="scope">
<el-input v-if="w.strObj" v-model="w.strObj.str6" placeholder @input="w.strObj.str6=/^d+.?d{0,2}$/.w.strObj .str6)||w.strObj.str6 == '' ? w.strObj.str6 : w.strObj.str6=''"></el-input>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="操作" width="200px">
<template slot-scope="scope">
<span v-if="w.farOrSon=='first'|| w.farOrSon=='middle'" @click="w,scop e.$index,'middle')">新增夹</span>
<span v-if="w.farOrSon=='first'|| w.farOrSon=='middle'" @click="w,scop e.$index,'last')">新增页</span>
<span v-if="w.farOrSon=='middle'|| w.farOrSon=='last'" @click="w,scope.$inde x)">编辑</span>
<span v-if="w.farOrSon=='middle'|| w.farOrSon=='last'" @click="w,scope.$in dex)">删除</span>
</template>
</el-table-column>
</el-table>
<!-- 编辑回显的弹框其实新增也可以⽤这个弹框但是没写 -->
<el-dialog title="提⽰" class="dia_box" :visible.sync="dialogFlag" width="500px">
<el-form :model="formData">
<el-form-item label="条件名称:" label-width="128px">
<el-input v-model="ditionName" autocomplete="off"></el-input>
</el-form-item>
<el-form-item v-if="formData.strObj" label="交强险（%）上游:" label-width="128px">
<el-input v-model="formData.strObj.str1" autocomplete="off"></el-input>
</el-form-item>
<el-form-item v-if="formData.strObj" label="交强险（%）基数:" label-width="128px">
<el-input v-model="formData.strObj.str2" autocomplete="off"></el-input>
</el-form-item>
<el-form-item v-if="formData.strObj" label="车船险（%）上游:" label-width="128px">
<el-input v-model="formData.strObj.str3" autocomplete="off"></el-input>
</el-form-item>
<el-form-item v-if="formData.strObj" label="车船险（%）基数:" label-width="128px">
<el-input v-model="formData.strObj.str4" autocomplete="off"></el-input>
</el-form-item>
<el-form-item v-if="formData.strObj" label="商业险（%）上游:" label-width="128px">
<el-input v-model="formData.strObj.str5" autocomplete="off"></el-input>
</el-form-item>
<el-form-item v-if="formData.strObj" label="商业险（%）基数:" label-width="128px">
<el-input v-model="formData.strObj.str6" autocomplete="off"></el-input>
</el-form-item>