el-table 树形结构数据 设置某一层，新增按钮不展示

  <template><div><el-table:data="tableData":row-class-name="rowClassName":tree-props="{ children: 'children', hasChildren: 'hasChildren' }"><!-- 表格列定义 --><!-- ... --><el-table-column label="操作" width="100"><template slot-scope="scope"><el-buttonv-if="showAddButton(scope.row)"type="primary"size="small"@click="handleAdd(scope.row)">新增</el-button></template></el-table-column></el-table></div>
</template><script>
export default {data() {return {// 表格数据tableData: [],};},methods: {rowClassName({ row }) {// 自定义方法，根据行数据设置行的 CSS 类名if (this.getLevel(row) === 2) {// 判断行的层级是否为第三级（索引从 0 开始）return "disable-add-button-row"; // 返回自定义的 CSS 类名}return "";// 其他行不添加特定的 CSS 类名},getLevel(row) {// 获取行的层级let level = 0;let parent = this.tableData.find((item) => item.rowKey === row.parentKey);while (parent) {level++;parent = this.tableData.find((item) => item.rowKey === parent.parentKey);}return level;},showAddButton(row) {// 判断是否展示新增按钮return this.getLevel(row) !== 2;},handleAdd(row) {// 点击新增按钮的逻辑处理 // ...},},
};
</script><style scoped>
.disable-add-button-row .el-button {display: none; // 隐藏新增按钮
}
</style>

在修正后的代码中，我们添加了一个 getLevel 方法，通过递归查找当前行的父节点并计算层级。然后我们根据 getLevel(row) 的返回值来确定当前行的层级，并根据层级判断是否显示新增按钮。

请将示例代码中的 :data 属性以及其他相关部分根据您的实际需求进行调整，确保适配您的数据结构和表格列定义。同时，需要在样式部分的 <style> 标签中设置 .disable-add-button-row .el-button 类的样式，以隐藏新增按钮。