table页面

README.md

@@ -1,4 +1,5 @@
 # ETA社区管理后台项目
 1. 测试访问地址：http://8.136.199.33:8900/
 2. 项目引入了两个UI库 Tdesign 和 ElementPlus,主要使用Tdesign因为UI是按照这个组件库标准设计的，
-    使用ElementPlus是因为用了其中的Tree组件
+    使用ElementPlus是因为用了其中的Tree组件
+3. t-table可以利用 cellEmptyContent插槽来实现 操作栏的渲染;具体示例 可见 customer\UserList页面中

src/layout/components/LeftWrap.vue

@@ -19,7 +19,7 @@ const navList = ref([
       },
       {
         name: '用户管理',
-        path: '/userList'
+        path: '/customer/userList'
       }
     ]
   },
@@ -221,7 +221,7 @@ function getMenuIcon(item) {
       :width="['200px', '80px']"
     >
       <template v-for="level1 in navList" :key="level1.SysMenuId">
-        <t-menu-item :index="level1.path" v-if="level1.IsLevel === 1">
+        <t-menu-item :value="level1.path" v-if="level1.IsLevel === 1">
           <svg-icon
             :name="getMenuIcon(level1.path)"
             :color="$route.path === level1.path ? '#086CE0' : '#333'"
@@ -229,7 +229,7 @@ function getMenuIcon(item) {
           ></svg-icon>
           <span style="margin-left: 5px">{{ level1.name }}</span>
         </t-menu-item>
-        <t-submenu :index="level1.path" v-if="level1.IsLevel === 2">
+        <t-submenu :value="level1.path" v-if="level1.IsLevel === 2">
           <template #title>
             <svg-icon
               :name="getMenuIcon(level1.path)"
@@ -240,14 +240,9 @@ function getMenuIcon(item) {
           </template>
           <t-menu-item
             v-for="child in level1.Children"
-            :index="child.path"
+            :value="child.path"
             :key="child.path"
           >
-            <svg-icon
-              name="menu/submenu"
-              :color="$route.path === child.path ? '#086CE0' : '#333'"
-              style="font-size: 16px"
-            ></svg-icon>
             <span style="margin-left: 5px">{{ child.name }}</span>
           </t-menu-item>
         </t-submenu>

src/router/modules/customer.js

@@ -0,0 +1,22 @@
+import LayoutIndex from "@/layout/Index.vue";
+
+export default[
+  {
+    path:'/customer',
+    name:'Customer',
+    component:LayoutIndex,
+    meta:{
+      title:'客户管理'
+    },
+    children:[
+      {
+        path:'userList',
+        name:'CustomerUserList',
+        component:()=>import('@/views/customer/UserList.vue'),
+        meta:{
+          title:'用户管理'
+        },
+      }
+    ]
+  }
+]

src/styles/tdesign.scss

@@ -21,4 +21,11 @@
   .t-dialog__footer{
     padding: var(--td-comp-paddingTB-l);
   }
-}
+}
+
+.t-table__header{
+  background-color: #EBEEF5;
+  tr{
+    background-color: transparent;
+  }
+}

src/views/customer/UserList.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { SearchIcon } from 'tdesign-icons-vue-next';
+
+const jobOpts = [
+  {
+    label: '在职',
+    value: '在职'
+  },
+  {
+    label: '离职',
+    value: '离职'
+  }
+]
+const accountStatusOpts = [
+  {
+    label: '启用',
+    value: '启用'
+  },
+  {
+    label: '禁用',
+    value: '禁用'
+  }
+]
+
+const filterState = reactive({
+  jobStatus: '',
+  accountStatus: '',
+  customer: '',
+  keyword: ''
+})
+const tableData = ref([])
+const columns = [
+  { align: 'center', colKey: '', title: '姓名' },
+  { align: 'center', colKey: '', title: '手机号' },
+  { align: 'center', colKey: '', title: '岗位-部门' },
+  { align: 'center', colKey: '', title: '最近登录时间', sorter: true, },
+  { align: 'center', colKey: '', title: '在职状态' },
+  { align: 'center', colKey: '', title: '账号状态' },
+  { align: 'center', colKey: '', title: '客户名称' },
+  {
+    align: 'center',
+    colKey: 'opt',
+    title: '操作',
+  },
+]
+const tablePagination = {
+  defaultCurrent: 1,
+  defaultPageSize: 20,
+  total: 0,
+}
+
+
+
+</script>
+
+<template>
+  <div class="customer-userlist-page">
+    <div class="bg-white flex top-wrap">
+      <t-button style="width: 120px">新增用户</t-button>
+      <t-button style="width: 120px; margin-left: 10px">批量导入用户</t-button>
+      <t-input
+        style="width: 310px; margin-left: auto"
+        placeholder="姓名/手机号"
+      >
+        <template #prefixIcon><SearchIcon /></template>
+      </t-input>
+    </div>
+    <div class="bg-white main-wrap">
+      <div class="flex filter-wrap">
+        <t-select
+          placeholder="请选择在职状态"
+          v-model:value="filterState.jobStatus"
+          clearable
+          style="width: 240px"
+        >
+          <t-option
+            v-for="item in jobOpts"
+            :key="item.value"
+            :label="item.value"
+            :value="item.value"
+          />
+        </t-select>
+        <t-select
+          placeholder="请选择账号状态"
+          v-model:value="filterState.accountStatus"
+          clearable
+          style="width: 240px"
+        >
+          <t-option
+            v-for="item in accountStatusOpts"
+            :key="item.value"
+            :label="item.value"
+            :value="item.value"
+          />
+        </t-select>
+        <t-select
+          placeholder="客户名称"
+          v-model:value="filterState.customer"
+          clearable
+          style="width: 240px"
+        >
+          <!-- <t-option
+            v-for="item in jobOpts"
+            :key="item.value"
+            :label="item.value"
+            :value="item.value"
+          /> -->
+        </t-select>
+      </div>
+      <t-table
+        rowKey="id"
+        :data="tableData"
+        :columns="columns"
+        bordered
+        :pagination="tablePagination"
+        show-header
+        resizable
+      >
+        <template #cellEmptyContent="{ col }">
+          <div v-if="col.colKey === 'opt'">
+            <t-button size="small" variant="text" theme="primary">编辑</t-button>
+            <t-button size="small" variant="text" theme="primary">启用</t-button>
+            <t-button size="small" variant="text" theme="danger">禁用</t-button>
+            <t-button size="small" variant="text" theme="primary">移动</t-button>
+            <t-button size="small" variant="text" theme="danger">删除</t-button>
+          </div>
+        </template>
+      </t-table>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.top-wrap {
+  padding: 20px;
+}
+.main-wrap {
+  margin-top: 20px;
+  padding: 20px;
+  .filter-wrap {
+    gap: 10px;
+    margin-bottom: 30px;
+  }
+}
+</style>