基于element-ui的树表排序问题

===========================================

前端代码

复制代码
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Task",
  components: {
    
    Treeselect
  },

 <el-table v-loading="loading" :data="taskList" row-key="taskId" border :row-class-name="tableRowClassName"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
      <!-- <el-table-column label="项目ID" align="center" prop="projectId" /> -->
      <!-- <el-table-column label="任务父ID" align="center" prop="parentId" />
      <el-table-column label="父类模板编号" align="center" prop="ancestors" /> -->
      <el-table-column prop="index" width="150" label="序号" align="center">

      </el-table-column>
</el-table>

=================js

复制代码
  /** 查询任务总表列表 */
    getList() {
      this.loading = true;
      listTask(this.queryParams).then(response => {
        this.taskList = this.handleTree(response.data, "taskId", "parentId");
        this.taskList = this.indexData1(this.taskList)
        this.loading = false;
      });

    },


    // 排序
    indexData1(val) {
      console.log(val)
      val.forEach((item, index) => {
        item.index = index + 1 + '';

        if (item.children.length > 0) {
          this.indexData2(item, item.index);
        }
      });
      return val;
    },
    indexData2(item, oldIndex) {
      if (item.children.length < 0) return;
      if (item.children.length > 0) {
        item.children.forEach((Item, i) => {
          Item.index = oldIndex + '.' + (i + 1);
          this.indexData2(Item, Item.index);
        });
      }
    },
相关推荐
HWL567912 分钟前
Express项目解决跨域问题
前端·后端·中间件·node.js·express
刺客-Andy25 分钟前
React 第三十九节 React Router 中的 unstable_usePrompt Hook的详细用法及案例
前端·javascript·react.js
Go_going_31 分钟前
【js基础笔记] - 包含es6 类的使用
前端·javascript·笔记
浩~~1 小时前
HTML5 浮动(Float)详解
前端·html·html5
AI大模型顾潇2 小时前
[特殊字符] 本地大模型编程实战(29):用大语言模型LLM查询图数据库NEO4J(2)
前端·数据库·人工智能·语言模型·自然语言处理·prompt·neo4j
工业互联网专业2 小时前
基于springboot+vue的医院门诊管理系统
java·vue.js·spring boot·毕业设计·源码·课程设计·医院门诊管理系统
九月TTS2 小时前
TTS-Web-Vue系列:Vue3实现内嵌iframe文档显示功能
前端·javascript·vue.js
爱编程的小学究2 小时前
【node】如何把包发布到npm上
前端·npm·node.js
我爱加班、、3 小时前
Chrome安装最新vue-devtool插件
javascript·vue.js·chrome·vue-devtool
weixin_473894773 小时前
前端服务器部署分类总结
前端·网络·性能优化