table表格初始化根据字段数字排序,table表格进入后返回上一级设置,第一级隐藏

news2024/11/19 13:27:14

 根据字段数字排序

// 初始化表格数据
const getTableData = async () => {
  try {
    loading.value = true
    const res = await getFileList()
//排序
    const sortedData = computed(() => {
      return res.slice().sort((a: any, b: any) => a.documentType - b.documentType);
    });
    tableData = sortedData.value
    loading.value = false
  } catch {
  }
}

返回上一级设置

 <div class="path-pass">
            <span v-if="filePathFlag">></span>
            <span> {{ filePathNext }}</span>
            <!-- 获取每一级路径 展示页面 -->
            <!-- <div v-if="path.length > 0">
              <span v-for="(item, index) in path" :key="index">
                {{ item }}
                <span v-if="index !== path.length - 1"> > </span>
              </span>
            </div> -->
          </div>

<span style=" cursor: pointer; position: absolute; right: 90px;" v-if="tableListPath.length > 0"
            @click="goBack"><el-icon>
              <Back />
            </el-icon>返回</span>

const ids = ref<any>(0)
const filePathsValue = ref('')
const filePathNext = ref('')
const filePathFlag = ref(false)
const tableListPath = reactive<any>([]);// 存储路径的数组

// 进入文件夹
const enterClick = async (row: any) => {
  tableListPath.push(row); // 将进入的文件夹添加到路径中
  if (row.documentType === 1) {
    // path.value.push(row.filePath);   // 进入下一级文件夹获取每一级路径 展示页面
    filePathFlag.value = true
    filePathNext.value = row.name//只展示当前层级名称
    ids.value = row.id
    filePathsValue.value = row.filePath
    getNextTableList()
  }

}
const getNextTableList = async () => {
  tableData.length = 0;
  const parmas = {
    Pid: ids.value,
    FilePath: filePathsValue.value
  }
  try {
    loading.value = true
    tableData = await getPassFileList(parmas)
    loading.value = false
  } catch {
    loading.value = false
  }

}
// 返回上一级
const goBack = async () => {
  if (tableListPath.length > 0) {
    tableListPath.pop(); // 删除最后一个路径
    // const filePath = tableListPath.value[tableListPath.value.length - 1].filePath
    // path.value.push(filePath);   // 进入上一级文件夹获取每一级路径 展示页面
    if (tableListPath.length === 0) {
      try {
        loading.value = true
        const res = await getFileList()
        const sortedData = computed(() => {
          return res.slice().sort((a: any, b: any) => a.documentType - b.documentType);
        });
        tableData = sortedData.value
        loading.value = false
      } catch {
      }
      filePathFlag.value = false
      filePathNext.value = ''
    } else {
      const folderId = tableListPath[tableListPath.length - 1].id; // 获取上一层文件夹的字段
      const folderFilePath = tableListPath[tableListPath.length - 1].filePath; // 获取上一层文件夹的字段
      const folderName = tableListPath[tableListPath.length - 1].name; // 获取上一层文件夹的字段
      filePathNext.value = folderName
      const parmaData = {
        Pid: folderId,
        FilePath: folderFilePath
      }

      try {
        loading.value = true
        tableData = await getPassFileList(parmaData)
        loading.value = false
      } catch {
        loading.value = false
      }

    }
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1066030.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Spring Boot | 第一篇】Spring Boot 原理

前言&#xff1a; 当今互联网时代&#xff0c;随着软件开发的快速发展&#xff0c;开发者们迫切需要一个简单、高效、可扩展的框架来提升开发效率和质量。Spring Boot作为一款备受欢迎的Java框架&#xff0c;应运而生。 Spring Boot以其优雅的设计和丰富的功能&#xff0c;成…

2023年中国铁路行车监测系统竞争格局、市场规模及行业发展趋势分析[图]

铁路行车监测系统是对铁路列车及车载设备运行状态全面监测的车载行车安全系统&#xff0c;是智能化、自动化等技术在铁路行业的具体应用。行车监测系统主要包括机车车载安全防护系统&#xff08;简称6A系统&#xff09;、机车远程监测与诊断系统&#xff08;简称CMD系统&#x…

编译工具链 之二 详解 ELF 格式及标准、UNIX 发展、ABI

在计算机及嵌入式系统中&#xff0c;二进制文件也有一定的标准格式&#xff0c;通常会包含在各平台的应用程序二进制接口 &#xff08;Application Binary Interface&#xff0c;ABI&#xff09;规范中。它是编译工具链必须要遵守的规范&#xff08;编译工具链产生符合 ABI 的二…

【数字图像处理第四版课后习题答案】第2章 数字图像基础(含英文原版)

2.1暂无 2.2 翻译答案 如图 P2.3 所示&#xff0c;视网膜图像中与点相对应的直径 x 是由类似的三角形得到的。即 得出 x 0.085d。根据第 2.1 节中的讨论&#xff0c;并结合一些自由解释&#xff0c;我们可以将眼窝视为一个方形传感器阵列&#xff0c;拥有大约 337,000 个元素…

6-3 递增的整数序列链表的插入 分数 5

List Insert(List L, ElementType X) {//创建结点List node (List)malloc(sizeof(List));node->Data X;node->Next NULL;List head L->Next; //定位real头指针//空链表 直接插入if (head NULL) {L->Next node;node->Next head;return L;}//插入数据比第…

一文全面解读CKA认证的含金量、详细介绍!

K8s是目前最流行的开源容器编排引擎&#xff0c;在全球都得到了广泛应用&#xff0c;BAT、京东、360、华为、网易、IBM、知乎等国内外诸多知名公司都在基于K8s构建企业容器云平台&#xff0c;支撑公司业务&#xff0c;越来越多的企业也都在向K8s迁移。相信在不远的将来&#xf…

winform中DevExpress控件一些属性

1.DevExpress控件bar去掉前面四点和后面的倒三角。 如图。设置bar属性optionsBar→allowQuickCustomizationFALSE

Leetcode hot 100之前缀和、差分数组、位运算

目录 差分数组-区间增减 和为K的子数组&#xff1a;前缀和 哈希表优化 除自身以外数组的乘积&#xff1a;前后缀区间 差分数组-区间增减 想对区间 nums[i..j] 的元素全部加 3&#xff0c;那么只需要让 diff[i] 3&#xff0c;然后再让 diff[j1] - 3 和为K的子数组&#x…

广州华锐互动:VR动物解剖实验室带来哪些便利?

随着科技的不断发展&#xff0c;我们的教育方式也在逐步变化和进步。其中&#xff0c;虚拟现实(VR)技术的应用为我们提供了一种全新的学习方式。尤其是在动物解剖实验中&#xff0c;VR技术不仅能够增强学习的趣味性&#xff0c;还能够提高学习效率和准确性。 由广州华锐互动开发…

Web_python_template_injection SSTI printer方法

这题挺简单的 就是记录一下不同方法的rce python_template_injection ssti了 {{.__class__.__mro__[2].__subclasses__()}} 然后用脚本跑可以知道是 71 {{.__class__.__mro__[2].__subclasses__()[71]}} 然后直接 init {{.__class__.__mro__[2].__subclasses__()[71].__i…

实战纪实 | 某米企业src未授权访问

公众号&#xff1a;掌控安全EDU 分享更多技术文章&#xff0c;欢迎关注一起探讨学习 某米企业src漏洞挖掘 这一挖就挖到了一个未授权操作漏洞&#xff0c;写个文章记录下~~ 通过信息收集&#xff0c;发现这么一个资产。 访问 http://xxx.com 如下图所示 1.点击头像-点击授权登…

【SQL Server】表死锁/解锁和sql语句分析

文章目录 表死锁查询锁的进程解锁 sql语句分析来源 表死锁 查询锁的进程 1 首先创建一个测试用的表&#xff1a; CREATE TABLE Test ( TID INT IDENTITY(1,1) ) 2 执行下面的SQL语句将此表锁住&#xff1a; SELECT * FROM Test WITH (TABLOCKX) 3 通过下面的语句可以查看…

【CMU15-445 Part-17】Two-Phase Locking

Part17-Two-Phase Locking Lock Types S-LOCK 共享锁 for reads X-LOCK 排他锁 for writes 上述T1最后R(A) 会导致不可重复读 2PL 允许数据库系统始终以保证Conflict Serializable schedule情况下分发lock Phase #1 Growing 每个txn请求locks 从lock managerlock manager…

万界星空科技云MES系统生产全流程追溯功能介绍

制造业工厂产品质量贯穿于产品的整个生命周期&#xff0c;也是企业参与市场竞争求生存求发展的基础&#xff0c;而制造过程中出现的产品质量问题则是产品最终质量的基石。 随着全球市场竞争的进一步加剧和制造业信息化进程的加快&#xff0c;企业对产品制造过程的质量信息管理…

1876. 长度为三且各字符不同的子字符串

1876. 长度为三且各字符不同的子字符串 C代码&#xff1a;滑动窗口 // 存在三种字符&#xff0c;且不重复、子串数量 int countGoodSubstrings(char * s){int k 3;int hash[26] {0};int len 0;int l 0;int ans 0;for (int i 0; i < strlen(s); i) {hash[s[i] - a];if…

c#设计模式-行为型模式 之 策略模式

&#x1f680;简介 &#x1f424;作为一个开发人员&#xff0c;开发需要选择一款开发工具&#xff0c;如在编写C#时&#xff0c;我们可以选择VisualStudio进行开发&#xff0c;也可以使用Rider 进行开发。 &#x1f433;该模式定义了一系列算法&#xff0c;并将每个算法封装起来…

最新天津python培训机构 Python培训的重要性

Python编程语言近年来备受瞩目&#xff0c;其简洁、易学、多用途的特点受到了众多程序员的喜爱。随着Python的普及程度不断提高&#xff0c;越来越多的人开始关注和学习Python。 Python培训的重要性 Python作为一门编程语言&#xff0c;具有广泛的应用领域&#xff0c;如数据…

linux5.10的一个警告Kernel image misaligned at boot, please fix your bootloader!

平台&#xff1a;rk3399linux5.10 问题&#xff1a;发现启动时有一个内核警告信息 Kernel image misaligned at boot, please fix your bootloader! 后面的数字是我打印的地址信息。 不知道这个内核搞一个这样的警告是什么原因&#xff0c;我就没有继续深挖啦。 一、通过搜…

解决若依框架多次list查询时,分页失效问题

一、问题背景 当若依框架遇到两次及以上的list查询时,会引发分页查询失效问题,如下图: 二、分析原因 分页查询原理 Mybatis的分页原理&#xff0c;大致就是使用MyBatis提供的插件接口,实现自定义插件,在插件的拦截方法内拦截待执行的 SQL,然后重写 SQL&#xff0c;实现分页…