my-bigScreen/screen-vue/src/views/system/menu/list.vue

<template>
	  <div class="data-manage-page">
		  <CSearch
		    @search="handleSearch"
		    @reset="handleReset"
		  >
		    <el-form-item label="用户名称：" class="search-item">
		      <el-input
		        v-model="searchForm.uname"
		        placeholder="请输入用户名称"
		        clearable
		        class="search-input"
		      />
		    </el-form-item>
		    <el-form-item label="登录账户：" class="search-item">
		      <el-input
		        v-model="searchForm.userName"
		        placeholder="请输入登录账户"
		        clearable
		        class="search-input"
		      />
		    </el-form-item>
		    <el-form-item label="用户状态：" class="search-item">
		      <el-select
		        v-model="searchForm.ustatus"
		        placeholder="请选择用户状态"
		        clearable
		        class="search-select"
		      >
		        <el-option label="停用" value="0" />
		        <el-option label="在用" value="1" />
		        <el-option label="锁定" value="2" />
		      </el-select>
		    </el-form-item>
		  </CSearch>
		  
		  
		  <div class="main-wrapper">
		    <div class="main-section">
		      <div class="action-section">
		        <el-button type="primary" icon="Plus" @click="handleAdd">
		          新增
		        </el-button>
		        <el-button type="success" icon="Download" @click="handleExport">
		          导出
		        </el-button>
		      </div>
		      <TreeTable
		        :table-data="tableData"
		        :loading="loading"
		        @load-children="handleLoadChildren"
		      >
		        <template #columns>
		          <el-table-column prop="name" label="名称" width="350" :tree-node="true" />
		          <el-table-column prop="desc" label="描述" width="400" />
		          <el-table-column prop="createTime" label="创建时间" width="200" />
		      	<el-table-column prop="createTime" label="创建时间" width="200" />
		      	<el-table-column prop="createTime" label="创建时间" width="200" />
		      	<el-table-column prop="createTime" label="创建时间" width="200" />
		      	<el-table-column prop="createTime" label="创建时间" width="200" fixed="right" />
		        </template>
		      </TreeTable>
		    </div>
		  </div>
	  </div>
	
	
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import CSearch from '@/components/Search/proSearch.vue'
import TreeTable from '@/components/Table/proTreeTable.vue'


const searchForm = reactive({
  uname: '',
  ustatus: '',
  userName: ''
})

// 模拟树形表格数据（一级节点）
const tableData = ref([
  {
    id: 1,
    name: '一级节点1',
    desc: '这是一级节点1（可展开到二级）',
    createTime: '2026-03-04',
    hasChildren: true // 标记有子节点
  },
  {
    id: 2,
    name: '一级节点2',
    desc: '这是一级节点2（无下级）',
    createTime: '2026-03-04',
    hasChildren: false
  },
  {
    id: 3,
    name: '一级节点3',
    desc: '这是一级节点3（可展开到二级，二级可展开到三级）',
    createTime: '2026-03-04',
    hasChildren: true
  }
])

const loading = ref(false)
const handleLoadChildren = async ({ row, resolve }) => {
  loading.value = true
  try {
    // 模拟接口请求延迟
    await new Promise(resolve => setTimeout(resolve, 800))
    
    const nodeId = row.id.toString()
    const level = nodeId.split('-').length // 通过ID分割判断层级：1=一级，2=二级，3=三级...
    
    let childrenData = []
    // 一级节点的子节点（二级）
    if (level === 1) {
      childrenData = [
        {
          id: `${row.id}-1`,
          name: `二级节点-${row.id}-1`,
          desc: `这是【${row.name}】的二级子节点1`,
          createTime: '2026-03-04',
          // 只有一级节点3的二级子节点1可以展开到三级
          hasChildren: row.id === 3 ? true : false
        },
        {
          id: `${row.id}-2`,
          name: `二级节点-${row.id}-2`,
          desc: `这是【${row.name}】的二级子节点2`,
          createTime: '2026-03-04',
          hasChildren: false
        },
        {
          id: `${row.id}-3`,
          name: `二级节点-${row.id}-3`,
          desc: `这是【${row.name}】的二级子节点3`,
          createTime: '2026-03-04',
          hasChildren: false
        }
      ]
    } 
    // 二级节点的子节点（三级）
    else if (level === 2) {
      childrenData = [
        {
          id: `${row.id}-1`,
          name: `三级节点-${row.id}-1`,
          desc: `这是【${row.name}】的三级子节点1`,
          createTime: '2026-03-04',
          hasChildren: false
        },
        {
          id: `${row.id}-2`,
          name: `三级节点-${row.id}-2`,
          desc: `这是【${row.name}】的三级子节点2`,
          createTime: '2026-03-04',
          hasChildren: false
        }
      ]
    }
    
    // 通过 resolve 回调返回子节点数据
    resolve(childrenData)
  } catch (error) {
    console.error('加载子节点失败:', error)
    resolve([]) // 加载失败返回空数组
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.data-manage-page {
  width: 100%;
  height: 100%;
  padding: 4px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

.main-wrapper {
  flex: 1;
  width: 100%;
  overflow: hidden;
  min-height: 0;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box;
}

.main-section {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.action-section {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

:deep(.el-button .el-icon) {
  margin-right: 4px;
}
</style>