踩坑记30 el-table 树结构对齐 包括无子节点的树节点 | vue3 setup 生命周期 数据初始化

2021.9.26

坑90（el-table、树结构与非树结构对齐）：目标是对齐树结构与非树结构的el-table。主要使用 padding-left 实现。

现在有一个el-table，采用树型结构显示，其中部分数据有子节点，部分数据无子节点。

首先参考了 ElementUI el-table组件 树形数据不对齐的解决方案_无枫的博客-CSDN博客  选择类名不含有 el-table__row--level- 字段在内且有el-table__row类名的元素的某个显示展开箭头的列中的格子（被选中的格子没有展开箭头）进行设置。

但有问题：最外层无子节点时起作用，但树中无子节点的格无法对齐。

参考： el-table tree类型对齐问题_oTianKongLan123的博客-CSDN博客  解决：树中无子节点的格有特定的保留元素，类名为el-table__placeholder，设置其格式即可。

最后整合版本：全树结构、部分树结构混合的el-table都适用。

// （推荐，在用到树结构的地方）单独设置，在scoped的style中

:deep(.el-table__row:not([class*='el-table__row--level-'])) > td:nth-child(1) {

    // 此处默认显示展开树图标的是第一列，也可以用td:first-child

    // 如果在其他列（比如第一列是多选框，那么树结构将显示在第二列）

    // 以第二列为例，td:nth-child(2) 选择属于其父元素的第二个子元素的每个 <td> 元素即可

    // 最外层非树，无树展开图标div.el-table__expand-icon

    // 值等于div.el-table__expand-icon的宽20px加右padding（无左）3px

    padding-left: 23px; 

}

:deep(.el-table__placeholder){

    // 树中无子节点，无树展开图标，但自带span.el-table__placeholder宽20px，同div.el-table__expand-icon，但无padding

    // 值为3px，同div.el-table__expand-icon的右padding（无左）3px

    padding-left: 3px;

}



// （不推荐，非显示树结构的第一列格式会受影响）在外层全局设置，非scoped

// 与单独设置的区别是有无:deep()包裹

.el-table__row:not([class*='el-table__row--level-']) > td:first-child {

    padding-left: 23px;

}

.el-table__placeholder{

    padding-left: 3px;

}

坑91（vue3、setup、数据初始化、生命周期）：关于数据初始化应该在vue的哪一生命周期。

参考： vue生命周期（数据初始化的请求放在created）_dream_wk的博客-CSDN博客_vue为什么在created里请求数据 数据初始化放在created中比较好。

而根据文档： 生命周期钩子 | Vue.js (vuejs.org) vue3中，beforeCreate、created的内容无需在setup()函数中调用钩子，直接写入即可。

文档tip：因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

所以可以再setup()最后编写init()初始化函数，并执行进行初始化。

// 在setup()最后部分，return前

const init=()=>{

    handleReset()

}



init()

by 莫得感情踩坑机(限定)