以下代碼可以直接復制使用

一、情景： 列表是一個樹狀表格，可以無限添加下級，以及對列表的某一行進行增刪改查（目前查沒有寫）。

原博鏈接

二、本篇是在原博主的代碼基礎上添加了部分功能。
功能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-tableref="cimsDictTable"default-expand-all:data="tableData"style="width: 100%"row-key="id"borderstripesize="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-column></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.str3" placeholder @input="scope.row.strObj.str3=/^\d+\.?\d{0,2}$/.test(scope.row.strObj.str3)||scope.row.strObj.str3 == '' ? scope.row.strObj.str3 : scope.row.strObj.str3=''"></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.str4" placeholder @input="scope.row.strObj.str4=/^\d+\.?\d{0,2}$/.test(scope.row.strObj.str4)||scope.row.strObj.str4 == '' ? scope.row.strObj.str4 : scope.row.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="scope.row.strObj" v-model="scope.row.strObj.str5" placeholder @input="scope.row.strObj.str5=/^\d+\.?\d{0,2}$/.test(scope.row.strObj.str5)||scope.row.strObj.str5 == '' ? scope.row.strObj.str5 : scope.row.strObj.str5=''"></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.str6" placeholder @input="scope.row.strObj.str6=/^\d+\.?\d{0,2}$/.test(scope.row.strObj.str6)||scope.row.strObj.str6 == '' ? scope.row.strObj.str6 : scope.row.strObj.str6=''"></el-input></template></el-table-column></el-table-column><el-table-column label="操作" width="200px"><template slot-scope="scope"><span v-if="scope.row.farOrSon=='first'|| scope.row.farOrSon=='middle'" style="color:#00ff00;cursor: pointer;" @click="addOneRow(scope.row,scope.$index,'middle')">新增夾</span><span v-if="scope.row.farOrSon=='first'|| scope.row.farOrSon=='middle'" style="color:#00ff00;cursor: pointer;" @click="addOneRow(scope.row,scope.$index,'last')">新增頁</span><span v-if="scope.row.farOrSon=='middle'|| scope.row.farOrSon=='last'" style="color:#f1ff;cursor: pointer;" @click="editRow(scope.row,scope.$index)">編輯</span><span v-if="scope.row.farOrSon=='middle'|| scope.row.farOrSon=='last'" style="color:#2593fc;cursor: pointer;" @click="delRow(scope.row,scope.$index)">刪除</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="formData.conditionName" 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></el-form><span slot="footer" class="dialog-footer"><el-button @click="dialogFlag = false">取 消</el-button><el-button type="primary" @click="changeRow">確 定</el-button></span></el-dialog><el-radio v-model="addOrEdit" :label="false">無數據列表</el-radio><el-radio v-model="addOrEdit" :label="true">有數據列表</el-radio><el-button @click="lookData">點擊打印樹表數據</el-button></div></div> </template><script> export default {name: 'TreeTable',data () {return {addOrEdit: true, // false無數據列表 true是有數據列表ref: 'cimsDictTable',tableData: [], // 這個是真正的展示樹狀列表selectAddLast: null, // 點擊樹表的添加 middle是添加中間 last 是添加最后末梢cimsDictTable: [],sourceData: [{id: 3, // 注意數據必須要有id 否則樹狀數據渲染會出問題 那么我們可以再前端新增時候以時間戳為id 真正保存到數據庫后會有真實idconditionName: '頂級條件',strObj: null,parentId: null,childNode: [] // childNode有值 就會形成對應的嵌套下級}],dialogFlag: false,formData: {id: null,conditionName: '',strObj: {str1: '',str2: '',str3: '',str4: '',str5: '',str6: ''}}}},watch: {addOrEdit (val) {if (!this.addOrEdit) {// 打開一個全新的列表this.getNewData()} else {// 根據id找到某個數據列表 回顯 假設id是123this.getIdDate(123)}}},mounted () {if (!this.addOrEdit) {// 打開一個全新的列表this.getNewData()} else {// 根據id找到某個數據列表 回顯 假設id是123this.getIdDate(123)}},beforeMount () {},methods: {getNewData () {this.$set(this.sourceData[0], 'childNode', [])this.initData()},// 獲取頁面數據回顯getIdDate (id) {// 總數據回顯 --- 假設給的數據 這條數據是默認數據的childNodelet dataArr = [{id: 31,conditionName: '條件--【頁】--頁不可添加下級 是末梢last',strObj: {str1: '11',str2: '22',str3: '1',str4: 2,str5: '2',str6: '2'},parentId: 3,childNode: []},{id: 32,conditionName: '條件--【夾】--夾可以添加下級 是中間middle',strObj: null,parentId: 3,childNode: [{id: 311,conditionName: '機密的任務',strObj: null,parentId: 32,childNode: [{id: 3221,conditionName: '這個條件名字比較長 會自動換行會自動換行會自動換行會自動換行會自動換行會自動換行會自動換行會自動換行',strObj: {str1: '11',str2: '121',str3: '1',str4: 2,str5: '2',str6: '2'},parentId: 311,childNode: []},{id: 3222,conditionName: '9527',strObj: {str1: '11',str2: '1',str3: '1',str4: 2,str5: '2',str6: '2'},parentId: 311,childNode: []},{id: 3223,conditionName: '夾文件',strObj: null,parentId: 311,childNode: []}]},{id: 321,conditionName: '附加條件-日后再說',strObj: {str1: '11',str2: '33',str3: '1',str4: 2,str5: '2',str6: '2'},parentId: 3,childNode: []}]},{id: 33,conditionName: '條件夾',strObj: null,parentId: 3,childNode: []}]// // 設置id---沒有id樹渲染會報錯--// let num = 121210// function setId (arr, pId) {// for (let j = 0; j < arr.length; j++) {// const element = arr[j]// if (element.childNode.length == 0) {// element['id'] = num// element['parentId'] = pId// num++// } else {// element['id'] = num// element['parentId'] = pId// num++// setId(element.childNode, element['id'])// }// }// }// setId(dataArr, 983873292643)// console.log(dataArr)// 獲取數據嵌套的層級function setLevel (arr, levelNum) {for (let j = 0; j < arr.length; j++) {const element = arr[j]if (element.childNode.length == 0) {element['level'] = levelNum} else {element['level'] = levelNumsetLevel(element.childNode, levelNum + 1)}}}setLevel(dataArr, 1)this.$set(this.sourceData[0], 'childNode', dataArr)console.log(this.sourceData)this.initData()},// 在樹表每次數據變化時候 新增 刪除 編輯 都需要設置出新的狀態 判斷是中間層 而沒有子集checkEveryItem () {// 這一步是找到空的中間層 需要添加頁let noChildAndNoRate = []function checkIsNeedChild (arr, ruleName) {for (let j = 0; j < arr.length; j++) {const element = arr[j]if (element.childNode.length == 0) {if (element.strObj == null || element.strObj == 'null') {element['isNeedLast'] = truenoChildAndNoRate.push({ cantName: ruleName.trim() + '/' + element.conditionName.trim() })} else {element['isNeedLast'] = false}} else {element['isNeedLast'] = falsecheckIsNeedChild(element.childNode, ruleName.trim() + '/' + element.conditionName.trim())}}}checkIsNeedChild(this.tableData, '')console.log('中間層的子集為空也就是沒末梢', noChildAndNoRate)// 這個是找到每層級最后一個 判斷是中間層 且 還有childNode 那么他的childNode就需要刪除多余虛線（子集childNode多余的虛線就是父級的的那個嵌套層級 那條虛線）// 第一步先找到 父級（滿足最后一層是中間層 且有子集childNode）function set_setLast (arr) {for (let j = 0; j < arr.length; j++) {const element = arr[j]if (element.childNode.length == 0) {if (j == (arr.length - 1)) {// element['isLastZhongjianAndHasChl'] = trueif ((element.strObj == null || element.strObj == 'null') && element.childNode.length > 0) {element['isLastZhongjianAndHasChl'] = true} else {element['isLastZhongjianAndHasChl'] = false}} else {element['isLastZhongjianAndHasChl'] = false}} else {if (j == (arr.length - 1)) {// element['isLastZhongjianAndHasChl'] = trueif ((element.strObj == null || element.strObj == 'null') && element.childNode.length > 0) {element['isLastZhongjianAndHasChl'] = true} else {element['isLastZhongjianAndHasChl'] = false}} else {element['isLastZhongjianAndHasChl'] = false}set_setLast(element.childNode)}}}// console.log(this.tableData[0].childNode)set_setLast(this.tableData[0].childNode)this.tableData[0]['isLastZhongjianAndHasChl'] = true// 第二步 根據isLastZhongjianAndHasChl和所需要刪除的層次level 遞歸遍歷 將需要刪除虛線的標志為true fasle是不刪 將幾條虛線刪不刪的值放在一個數組內function delArrItem (arr, flagDel, num, farArr) {for (let j = 0; j < arr.length; j++) {const element = arr[j]let delItemFlag = JSON.parse(JSON.stringify(farArr)) // 必須深拷貝 將父級的數組繼承到子集使用 深拷貝 才不會改變父級數組值for (let h = 0; h < element.level; h++) {if (flagDel == 'true' || flagDel == true) {if ((h + 1) == num) {delItemFlag[h] = 'true'} else {if (delItemFlag[h] == 'true' || delItemFlag[h] == true) { // 針對需要刪除的 就不要再賦值} else {delItemFlag[h] = 'false'}}} else {if (delItemFlag[h] == 'true' || delItemFlag[h] == true) {} else {delItemFlag[h] = 'false'}}}element['delItemFlag'] = delItemFlagif (element.childNode.length == 0) {} else {delArrItem(element.childNode, element.isLastZhongjianAndHasChl, element.level, element['delItemFlag'])}}}delArrItem(this.tableData[0].childNode, false, 0, [])// this.tableData[0]['isLastZhongjianAndHasChl'] = true// 這個是找到每層級最后一個 然后標志出來true 最后畫虛線時候需要 單獨多畫一個線用來遮擋多余的當前層虛線（因為行高自適應 當某層的末梢行高超過50px時候 之前設置的top: -24px就不夠了 會多出來一部分虛線 故需要遮擋掉）function set_lastMoreDash (arr) {for (let j = 0; j < arr.length; j++) {const element = arr[j]if (element.childNode.length == 0) {if (j == (arr.length - 1)) {element['moreOneDash'] = true} else {element['moreOneDash'] = false}} else {if (j == (arr.length - 1)) {element['moreOneDash'] = true} else {element['moreOneDash'] = false}set_lastMoreDash(element.childNode)}}}set_lastMoreDash(this.tableData[0].childNode)console.log('處理虛線', this.tableData)},lookData () {console.log('tableData--', this.tableData)},Menuclose () {this.dialogVisibleMenu = false},setRowData (row, parentId, farOrSon, val) {let strObj = nullif (farOrSon == 'last') {strObj = {str1: '',str2: '',str3: '',str4: '',str5: '',str6: ''}} else {strObj = null}return {id: new Date().valueOf(),conditionName: val.newName,parentId: parentId || null,strObj: strObj,edit: true,add: true,childNode: [],level: (row.level >= 0) ? (row.level + 1) : 1,farOrSon: farOrSon}},// 手動勾選數據行select22 (selection, row) {// 判斷當前行是否選中// 不需要判斷 id, 因為引用地址相同const selected = selection.some((item) => item === row)// 處理所有子級this.selectChildren(row, selected)},selectAll (selection) {/** 這里引用別人的代碼:* selectAll 只有兩種狀態: 全選和全不選* 所以我們只需要判斷一種狀態即可* 而且也不需要判斷 id, 因為 selection 和 this.data 中對象引用地址是相同的*/// tableData 第一層只要有在 selection 里面就是全選const isSelect = this.tableData.some((item) => selection.includes(item))if (isSelect) {selection.forEach((item) => {this.selectChildren(item, isSelect)})} else {this.tableData.forEach((item) => {this.selectChildren(item, isSelect)})}},selectChildren (row, selected) {if (row['childNode'] && Array.isArray(row['childNode'])) {row['childNode'].forEach((item) => {this.toggleSelection(item, selected)this.selectChildren(item, selected)})}},selectionChange (selection) {this.debounce(this.tableSelectChange, 100, selection)},toggleSelection (row, select) {row &&this.$nextTick(() => {this.$refs[this.ref] &&this.$refs[this.ref].toggleRowSelection(row, select)})},// 防抖debounce (fun, wait, params) {clearTimeout(this.timeout)this.timeout = setTimeout(fun, wait, params)},getSelectedList () {// 獲取選中數據源let list = JSON.parse(JSON.stringify(this.cimsDictTable))list.forEach((e) => (e.childNode = null))return list},addRow (row, id, farOrSon, val) {console.log(row, id)// 去掉這個if和else是 為了達到可以不保存 就繼續添加下級// if (!row.add) {// 新增行數據let addrow = this.setRowData(row, row.id, farOrSon, val)// 新增if (row.childNode) {row.childNode.push(addrow)} else {// 添加數據this.$set(row, 'childNode', [addrow])}// 展開行this.$nextTick(() => {// 更新后打開節點this.$refs.cimsDictTable.toggleRowExpansion(row, true)// 刷新樹this.refTable()})// } else {// this.$message({// message: '請保存后再繼續添加子節點!',// type: 'warning'// })// }// 每次添加編輯刪除樹表需要 重新計算出新屬性狀態this.checkEveryItem()},addOneRow (row, index, farOrSon) {this.selectAddLast = farOrSonlet item = {}let val = { newName: `新的條件${Math.floor(Math.random() * (1 - 1000) + 1000)}` }// 假設這個就是新增是一行的值console.log(1123, val)function findRow (arrA, Id, val) {for (let h = 0; h < arrA.length; h++) {const element = arrA[h]if (element.childNode.length == 0) {if (element.id == Id) {item = element}} else {if (element.id == Id) {item = element}findRow(element.childNode, Id, val)}}}findRow(this.tableData, row.id, val)this.addRow(item, row.id, this.selectAddLast, val)},updateTableTree (parentId, nodes) {// 更新需要先更新上級節點this.$set(this.$refs.cimsDictTable.store.states.lazyTreeNodeMap,parentId,nodes)},refTable () {let _this = thisfunction dg (data) {for (let i in data) {if (data[i].childNode) {_this.updateTableTree(data[i].id, data[i].childNode)dg(data[i].childNode)}}}dg(this.tableData)},// 刪除當前條及對應下級數據deleteTable (row, index, arr) {for (let i = 0; i < arr.length; i++) {const element = arr[i]if (element.id == row.id) {arr.splice(i, 1)} else {if (element.childNode.length > 0) {this.deleteTable(row, index, element.childNode)} else {}}}},delRow (row, index) {console.log(row, index)this.$confirm('確認刪除該條件及下級條件?', '提示', {confirmButtonText: '確定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.deleteTable(row, index, this.tableData)// 每次添加編輯刪除樹表需要 重新計算出新屬性狀態this.checkEveryItem()}).catch(() => {this.$message({type: 'info',message: '已取消刪除'})})// 刪除行let delArr = []function dg (data) {for (let i in data) {// 過濾當前新增的數據if (!data[i].add) {delArr.push(data[i].id)}if (data[i].childNode) {dg(data[i].childNode)}}}dg([row])// 刪除},editRow (row, index) {// 編輯this.$set(row, 'edit', true)// 使用深拷貝 否則會影響改彈框 就直接影響列表數據了 我們要的是改了彈框點擊確認才改列表數據 故需要深拷貝this.formData = JSON.parse(JSON.stringify(row))this.dialogFlag = true},// 點擊了彈框的確定changeRow () {let val = this.formDatafunction findId (arrA, Id, val) {for (let h = 0; h < arrA.length; h++) {const element = arrA[h]if (element.childNode.length == 0) {if (element.id == Id) {element['conditionName'] = val.conditionNameelement['strObj'] = val.strObjconsole.log(12121, element, val)}} else {if (element.id == Id) {element['conditionName'] = val.conditionNameelement['strObj'] = val.strObjconsole.log(12121, element, val)}findId(element.childNode, Id, val)}}}findId(this.tableData, val.id, val)this.dialogFlag = false// 每次添加編輯刪除樹表需要 重新計算出新屬性狀態this.checkEveryItem()},proTableData (data) {let _this = this// 處理數據function dg (data) {for (let i in data) {_this.$set(data[i], 'edit', false)if (data[i].childNode) {// 重要:樹狀節點數據刷新_this.updateTableTree(data[i].id, data[i].childNode)dg(data[i].childNode)}}}dg(data)// 給數據判斷添加父子節點標識function setFarSon (data) {for (let index = 0; index < data.length; index++) {const element = data[index]// console.log(element.parentId, element.parentId == undefined)if (element.parentId == undefined || element.parentId == null) {element['farOrSon'] = 'first'setFarSon(element.childNode)} else {if (element.strObj == null || element.strObj == 'null') {element['farOrSon'] = 'middle'setFarSon(element.childNode)} else {element['farOrSon'] = 'last'}}}}setFarSon(data)},initData () {// 數據加載 模仿數據請求let res = JSON.parse(JSON.stringify(this.sourceData))// 數據處理 添加編輯標識this.proTableData(res)this.tableData = res// 每次添加編輯刪除樹表需要 重新計算出新屬性狀態this.checkEveryItem()},load (tree, treeNode, resolve) {// 節點加載setTimeout(() => {resolve(tree.childNode)}, 1000)},handleSelectionChange (val) {// 全選this.cimsDictTable = val}} } </script><style lang="less" scoped> // 樹狀表格樣式 .a_tree_box {width: calc(100vw - 300px);height: 100%;margin-bottom: 20px;padding: 40px;.cd-tool {display: flex;flex-direction: row;}.data-table {/deep/ .cell {display: flex;align-items: center;}// 固定表格高度/deep/td {height: 50px;padding: 0;}/deep/tbody {tr {overflow: hidden;td {// width: 40px !important;// background-color: #1fff!important;// background-color: rgba(255, 255, 255, 0); //必須設置為透明色 否則 warning-row 顯示不出來.cell {padding: 0 !important;// background-color: #1fff;height: 100%;position: relative;overflow: visible !important;.l_bor1_box {top: -24px;display: inline-block;width: 1px;height: 100%;border-left: 1px dashed #ccc;position: absolute;}.l_bor2_box {display: inline-block;width: 30px;height: 1px;border-top: 1px dashed #ccc;position: absolute;}.more_dash {display: inline-block;width: 1px;height: 50%;border-top: 1px dashed #ccc;position: absolute;top: calc(50% - 1px);// background-color: rgba(248, 250, 252, 1);background-color: rgb(255, 253, 253);}.el-table__expand-icon {//這個是將所有的條件前面的圖標 固定掉display: inline-block;width: 20px !important;min-width: 20px !important;position: relative;z-index: 999;// background-color: #1fff;}.el-table__placeholder {//這個是將所有的條件前面的空白 固定成20px 這樣才會有間隔層級視覺效果 如果不做固定 會導致 條件文字多的時候 有的是20xp 有的不是 就導致看起來沒層級一樣display: inline-block;width: 25px !important;max-width: 25px !important;min-width: 25px !important;}.l_bor3_box {display: inline-block;width: 1px;height: 15px;border-left: 1px dashed #ccc;top: 15px;left: -13px;position: relative;}}}td:nth-child(n + 2) {.cell {span {// background-color: #1fff;display: inline-block;width: 100%;text-align: center;}}}}}}.showName {display: inline-block;// max-width: 100px;// white-space: nowrap;white-space: wrap;overflow: hidden;text-overflow: ellipsis;}.one_two {width: 20px;height: 20px;margin-right: 3px;}.isML10 {margin-left: 10px; //判斷有無數據 沒數據就需要左偏移對齊}.abcd {width: 20px;height: 20px;cursor: pointer;margin-left: 3px;}.tip_icon {width: 20px;height: 20px;cursor: pointer;position: relative;top: -1px;left: 30px;}.tip_box {display: inline-block;width: fit-content !important;min-width: 105px;color: red;font-weight: 700;position: relative;top: 1px;margin-left: 33px;font-size: 17px;}/deep/ .el-input__inner {margin-left: 3px !important;padding: 0 !important;width: 44px !important;height: 25px !important;text-align: center !important;}.dia_box {/deep/.el-input {text-align: left;.el-input__inner {width: 300px !important;height: 35px !important;text-align: left !important;}}} } </style>

總結

以上是生活随笔為你收集整理的vue+element实现树状表格的增删改查；使用el-table树形数据与懒加载实现树状表格增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。