• 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. }

  • 相关阅读:
    java基础之内部类
    C++语言程序设计任务书
    vue - - - - vite创建vue3项目(不使用TS)
    Go语言(下载、安装、环境配置、GoLand编译器安装、编写HelloWorld)
    消息总线 —— SpringCloud Bus
    利用FinalShell访问虚拟机
    关于我使用vue-quill-editor遇到的一些“坑”
    HyperLynx(十六)PCI-E的设计与仿真
    C++继承
    重写jar包中的类的方法
  • 原文地址:https://blog.csdn.net/xiaoming4965/article/details/133638326