Merge pull request #21 from github-learning/dev

Dev

Author: github-learning

components.d.ts

@@ -45,6 +45,7 @@ declare module 'vue' {
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
     Form: typeof import('./src/components/ProTable/components/form.vue')['default']
@@ -63,4 +64,7 @@ declare module 'vue' {
     SearchForm: typeof import('./src/components/ProTable/components/searchForm.vue')['default']
     SidebarItemLink: typeof import('./src/layout/components/layout-menu/SidebarItemLink.vue')['default']
   }
+  export interface ComponentCustomProperties {
+    vLoading: typeof import('element-plus/es')['ElLoadingDirective']
+  }
 }

eslint.config.js

@@ -68,7 +68,8 @@ export default [
       '@typescript-eslint/no-unused-vars': ['warn'], // 设置为 warning
       '@typescript-eslint/no-explicit-any': 'warn', // 允许使用 any
       '@typescript-eslint/no-empty-object-type': 'off',  //  {} 类型而不触发错误
-      '@typescript-eslint/no-unused-expressions': "warn" // 未使用的表达式
+      '@typescript-eslint/no-unused-expressions': "warn", // 未使用的表达式,
+      'no-undef': 'off', // 禁用 no-undef 规则
     },
   },
   prettierRecommended, // 覆盖掉eslint的规范

src/components/ProTable/components/tableColumn.tsx

@@ -3,7 +3,7 @@ import { ElTable, ElTableColumn } from 'element-plus'
 // import { useTable } from '@/hooks/useTable'
 import notDataImage from '@/assets/images/notData.png' // 采用 import 语法引入图片
 import { ColumnProps, RenderScope } from '../model'
-// const { handleSizeChange, handleCurrentChange } = useTable()
+
 export default defineComponent({
   props: {
     columns: {

src/components/ProTable/index.vue

@@ -11,10 +11,13 @@
     :columns="searchColumns"
     :search-param="searchParam"
   ></SearchForm>
-  xx{{ searchParam }}
 
-  <!-- :columns="searchColumns"  -->
-  <TableColumn v-bind="props" :data="processTableData"></TableColumn>
+  <TableColumn
+    v-bind="props"
+    :data="processTableData"
+    v-loading="!processTableData || !processTableData.length"
+  ></TableColumn>
+
   <Pagination
     v-if="pagination"
     :pageable="pageable"

src/hooks/useTable.ts

@@ -93,8 +93,10 @@ export const useTable = (
         ...state.totalParam
       })
       console.log('data', data)
-      dataCallBack && (data = dataCallBack(data))
-      state.tableData = isPageable ? data.list : data
+      setTimeout(() => {
+        dataCallBack && (data = dataCallBack(data))
+        state.tableData = isPageable ? data.list : data
+      }, 1000)
 
       // 解构后台返回的分页数据 (如果有分页更新分页信息)
       if (isPageable) {

src/style/el-table.scss

@@ -84,6 +84,7 @@
     // 解决表格数据为空时样式不居中问题(仅在element-plus中)
     .el-table__empty-block {
       .el-table__empty-text {
+        width: auto;
         height: 300px;
         display: flex;
 

src/views/guide/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- <proTable :table-columns="tableColumns" :data="fetchData" stripe /> -->
   <div class="table-box">
     <ProTable
       ref="proTable"
@@ -9,11 +8,7 @@
       :request-api="getUserList"
     ></ProTable>
   </div>
-  <!-- :row-class-name="tableRowClassName"
-    :span-method="objectSpanMethod"
-    :show-summary="true"
-    :summary-method="getSummaries"
-    @row-click="rowClick" -->
+
   <el-button @click="focusHandler">聚焦</el-button>
   <my-input v-model="msg" ref="myInputRef">
     <template #prepend>Prepend</template>
@@ -38,7 +33,10 @@ const tableColumns = ref([
     label: '名称',
     prop: 'username',
     width: '150',
-    dataIndex: 'username'
+    dataIndex: 'username',
+    render: (row) => {
+      return <el-tag type="primary">{row.username}</el-tag>
+    }
   },
   {
     label: '描述',
@@ -47,7 +45,19 @@ const tableColumns = ref([
   {
     label: '手机',
     prop: 'mobile',
-    dataIndex: 'mobile'
+    dataIndex: 'mobile',
+    render: (row) => {
+      return (
+        <>
+          {row.mobile ? (
+            <el-icon>
+              <Cellphone />
+            </el-icon>
+          ) : null}{' '}
+          {row.mobile}
+        </>
+      )
+    }
   },
   {
     label: '状态',
@@ -64,12 +74,26 @@ const tableColumns = ref([
   {
     label: '操作',
     prop: 'action',
-    width: '180',
+    width: '280',
     render: (row) => {
       const handleAction = (row) => {
-        console.log(row)
+        console.log(
+          '%c [ row ]-71',
+          'font-size:13px; background:pink; color:#bf2c9f;',
+          row
+        )
       }
-      return <el-button onClick={() => handleAction(row)}>操作按钮</el-button>
+      return (
+        <>
+          <el-button type="primary" onClick={() => handleAction(row)}>
+            新增
+          </el-button>
+          <el-button onClick={() => handleAction(row)}>编辑</el-button>
+          <el-button type="danger" onClick={() => handleAction(row)}>
+            删除
+          </el-button>
+        </>
+      )
     }
   }
 ])