树状表格子节点移动 - 在Vue.js中实现上下移动子节点的表格功能

目录

功能介绍

示例

代码

视图部分

逻辑部分

完整代码

---

功能介绍

        本文介绍了如何在Vue.js框架下实现一个树状表格，其中支持选择子节点行的上下移动。通过这个功能，用户可以方便地改变子节点的顺序。代码示例和详细的实现步骤将展示如何使用Vue.js的相关特性和组件实现这个功能。通过本文的介绍，您可以轻松了解如何在您的Vue.js项目中应用这个功能，以满足您的特定需求。     

示例

代码

视图部分

        实现父节点选择的代码

        在上次选中父节点的代码基础上加上操作行，生成上下移动的按钮： 

      <el-table-column align="center">
        <template slot-scope="scope" v-if="!scope.row.children">
          <el-button v-show="!validateOperate(scope.row, 'up')" size="mini" icon="el-icon-top" plain
            @click="handleSort(scope.row, 'up')">
          </el-button>
          <el-button v-show="!validateOperate(scope.row, 'down')" size="mini" icon="el-icon-bottom" plain
            @click="handleSort(scope.row, 'down')"></el-button>
        </template>
      </el-table-column>

        新增列定义，用于显示上移和下移按钮。<template> 标签中定义了使用 slot-scope 来访问作用域插槽，在这个作用域下，使用了两个 <el-button> 元素来展示上移和下移按钮。为了使第一行与最后一行只有下移或上移，这里通过绑定 v-show 来控制按钮的显示与隐藏，根据 validateOperate() 方法的返回值确定按钮是否可见。@click 侦听器则会触发 handleSort() 方法来完成所在行的移动。

逻辑部分

组件数据和选中父节点的代码相同，获取tableData后，如果没有index，则自己遍历加上该属性。

   

methods对象新增方法：

• getParent(id) 方法用于获取拥有指定子行 id 的父级行，它通过遍历 this.tableData 数组来寻找子行所属的父行。

    getParent(id) {
      let result = [];
      this.tableData.some(item => {
        item.children.some(d