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

最新推荐文章于 2023-11-20 10:35:46 发布

LifeFuture1994

最新推荐文章于 2023-11-20 10:35:46 发布

阅读量1k

点赞数

文章标签： vue.js elementui 前端

本文链接：https://blog.csdn.net/future1994/article/details/132027928

版权

该代码示例展示了如何在Vue.js中使用ElementUI的el-table组件创建树形表格，并根据行数据的层级动态控制新增按钮的显示。通过getLevel方法计算行的层级，结合rowClassName和自定义CSS类控制按钮的显示状态。

摘要由CSDN通过智能技术生成

  <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-button
            v-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 类的样式，以隐藏新增按钮。