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


     根据字段数字排序

    1. // 初始化表格数据
    2. const getTableData = async () => {
    3. try {
    4. loading.value = true
    5. const res = await getFileList()
    6. //排序
    7. const sortedData = computed(() => {
    8. return res.slice().sort((a: any, b: any) => a.documentType - b.documentType);
    9. });
    10. tableData = sortedData.value
    11. loading.value = false
    12. } catch {
    13. }
    14. }

    返回上一级设置

    1. <div class="path-pass">
    2. <span v-if="filePathFlag">>span>
    3. <span> {{ filePathNext }}span>
    4. div>
    5. <span style=" cursor: pointer; position: absolute; right: 90px;" v-if="tableListPath.length > 0"
    6. @click="goBack"><el-icon>
    7. <Back />
    8. el-icon>返回span>

    1. const ids = ref(0)
    2. const filePathsValue = ref('')
    3. const filePathNext = ref('')
    4. const filePathFlag = ref(false)
    5. const tableListPath = reactive([]);// 存储路径的数组
    6. // 进入文件夹
    7. const enterClick = async (row: any) => {
    8. tableListPath.push(row); // 将进入的文件夹添加到路径中
    9. if (row.documentType === 1) {
    10. // path.value.push(row.filePath); // 进入下一级文件夹获取每一级路径 展示页面
    11. filePathFlag.value = true
    12. filePathNext.value = row.name//只展示当前层级名称
    13. ids.value = row.id
    14. filePathsValue.value = row.filePath
    15. getNextTableList()
    16. }
    17. }
    18. const getNextTableList = async () => {
    19. tableData.length = 0;
    20. const parmas = {
    21. Pid: ids.value,
    22. FilePath: filePathsValue.value
    23. }
    24. try {
    25. loading.value = true
    26. tableData = await getPassFileList(parmas)
    27. loading.value = false
    28. } catch {
    29. loading.value = false
    30. }
    31. }
    32. // 返回上一级
    33. const goBack = async () => {
    34. if (tableListPath.length > 0) {
    35. tableListPath.pop(); // 删除最后一个路径
    36. // const filePath = tableListPath.value[tableListPath.value.length - 1].filePath
    37. // path.value.push(filePath); // 进入上一级文件夹获取每一级路径 展示页面
    38. if (tableListPath.length === 0) {
    39. try {
    40. loading.value = true
    41. const res = await getFileList()
    42. const sortedData = computed(() => {
    43. return res.slice().sort((a: any, b: any) => a.documentType - b.documentType);
    44. });
    45. tableData = sortedData.value
    46. loading.value = false
    47. } catch {
    48. }
    49. filePathFlag.value = false
    50. filePathNext.value = ''
    51. } else {
    52. const folderId = tableListPath[tableListPath.length - 1].id; // 获取上一层文件夹的字段
    53. const folderFilePath = tableListPath[tableListPath.length - 1].filePath; // 获取上一层文件夹的字段
    54. const folderName = tableListPath[tableListPath.length - 1].name; // 获取上一层文件夹的字段
    55. filePathNext.value = folderName
    56. const parmaData = {
    57. Pid: folderId,
    58. FilePath: folderFilePath
    59. }
    60. try {
    61. loading.value = true
    62. tableData = await getPassFileList(parmaData)
    63. loading.value = false
    64. } catch {
    65. loading.value = false
    66. }
    67. }
    68. }
    69. }

  • 相关阅读:
    Seata流程源码梳理下篇-TC
    高NA傅里叶显微镜单分子成像
    Excel Unix时间戳和日期时间格式的相互转换
    (七)C++中实现argmin与argmax
    SpringBoot介绍
    已经完成Qt布局中,添加布局
    Dock的安装和使用
    (仿牛客社区项目)Java开发笔记7.8:将文件上传至服务器
    【区块链实战】什么是智能合约,如何搭建智能合约环境
    JAVAEE之CSS
  • 原文地址:https://blog.csdn.net/xiaoming4965/article/details/133638326