添加基础公共表格

components.d.ts

@@ -11,6 +11,7 @@ declare module '@vue/runtime-core' {
     RouterView: typeof import('vue-router')['RouterView']
     Table: typeof import('./src/components/table/index.vue')['default']
     Table2: typeof import('./src/components/table2/index.vue')['default']
+    TableTemp: typeof import('./src/components/tableTemp/index.vue')['default']
   }
 }
 

package.json

@@ -22,10 +22,11 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "^2.0.9",
-    "js-error-collection": "^1.0.7",
     "axios": "0.21.3",
     "echarts": "5.3.2",
+    "el-table-infinite-scroll": "^3.0.1",
     "element-plus": "^2.2.9",
+    "js-error-collection": "^1.0.7",
     "mitt": "^3.0.0",
     "moment-mini": "2.22.1",
     "nprogress": "0.2.0",
@@ -40,10 +41,17 @@
     "@babel/eslint-parser": "7.16.3",
     "@types/echarts": "4.9.7",
     "@types/mockjs": "1.0.6",
+    "@types/node": "^17.0.35",
     "@typescript-eslint/eslint-plugin": "5.5.0",
     "@typescript-eslint/parser": "5.5.0",
     "@vitejs/plugin-legacy": "1.6.4",
+    "@vitejs/plugin-vue": "^2.3.3",
     "@vitejs/plugin-vue-jsx": "1.3.1",
+    "@vitest/coverage-c8": "^0.22.1",
+    "@vitest/ui": "^0.22.1",
+    "@vue/cli-service": "4.5.17",
+    "@vue/test-utils": "^2.0.2",
+    "@vueuse/core": "^8.7.5",
     "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-define-config": "1.2.0",
@@ -51,32 +59,25 @@
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-vue": "8.1.1",
     "husky": "7.0.2",
+    "jsdom": "16.4.0",
     "mockjs": "1.1.0",
     "prettier": "2.2.1",
-    "svg-sprite-loader": "6.0.11",
-    "vite-plugin-html": "^3.2.0",
-    "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-style-import": "1.2.1",
-    "vite-plugin-svg-icons": "1.0.5",
-    "@vue/cli-service": "4.5.17",
-    "@types/node": "^17.0.35",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "resize-observer-polyfill": "^1.5.1",
     "sass": "^1.52.1",
+    "svg-sprite-loader": "6.0.11",
     "typescript": "^4.7.2",
+    "unocss": "^0.33.5",
     "unplugin-auto-import": "^0.5.11",
     "unplugin-vue-components": "^0.19.5",
+    "unplugin-vue-define-options": "^0.6.1",
     "vite": "^3.0.7",
-    "@vueuse/core": "^8.7.5",
-    "vue-tsc": "^0.34.16",
+    "vite-plugin-html": "^3.2.0",
     "vite-plugin-mkcert": "^1.7.2",
-    "unplugin-vue-define-options": "^0.6.1",
-    "unocss": "^0.33.5",
-    "@vitest/coverage-c8": "^0.22.1",
-    "@vitest/ui": "^0.22.1",
+    "vite-plugin-mock": "^2.9.6",
+    "vite-plugin-style-import": "1.2.1",
+    "vite-plugin-svg-icons": "1.0.5",
     "vitest": "^0.22.1",
-    "@vue/test-utils": "^2.0.2",
-    "resize-observer-polyfill": "^1.5.1",
-    "jsdom": "16.4.0"
+    "vue-tsc": "^0.34.16"
   },
   "pnpm": {
     "peerDependencyRules": {

src/components/tableTemp/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <el-table
+    v-el-table-infinite-scroll="load"
+    :row-key="props.tableProperty.rowKey?props.tableProperty.rowKey:tablePropertyDefault.rowKey"
+    :row-style="rowStyle"
+    :data="props.tableData"
+    :height="props.tableProperty.height?props.tableProperty.height:tablePropertyDefault.height"
+    :max-height="props.tableProperty.maxHeight?props.tableProperty.maxHeight:tablePropertyDefault.maxHeight"
+    :stripe="props.tableProperty.stripe?props.tableProperty.stripe:tablePropertyDefault.stripe"
+    :border="props.tableProperty.border?props.tableProperty.border:tablePropertyDefault.border"
+    :highlight-current-row="props.tableProperty.highlightCurrentRow?props.tableProperty.highlightCurrentRow:tablePropertyDefault.highlightCurrentRow"
+    :header-cell-class-name="props.tableProperty.headerRowClassName?props.tableProperty.headerRowClassName:tablePropertyDefault.headerRowClassName"
+    :tooltip-effect="props.tableProperty.tooltipEffect?props.tableProperty.tooltipEffect:tablePropertyDefault.tooltipEffect"
+    :show-summary="props.tableProperty.showSummary?props.tableProperty.showSummary:tablePropertyDefault.showSummary"
+    :row-class-name="tableRowClassName"
+    :cell-class-name="cellClassName"
+  >
+  <!-- label-class-name  可通过 tableHeader中传入class来修改某一个或某一类表头的样式-->
+    <el-table-column
+      class="infinite-list-item"
+      v-for="(items, index) in props.tableHeader"
+      :key="index"
+      :label="items.label"
+      :prop="items.key"
+      :width="props.tableColumnProperty.width"
+      :sortable="items.sortable ? items.sortable : props.tableColumnProperty.sortable"
+      :show-overflow-tooltip="props.tableColumnProperty.showOverflowTooltip"
+      :align="items.align ? items.align : props.tableColumnProperty.align"
+      :header-align="items.headerAlign ? items.headerAlign : props.tableColumnProperty.headerAlign"
+      :label-class-name="items.lableClass?items.lableClass:''"
+    >
+      <template #default="scope">
+        {{ scope.row[items.key] }}
+      </template>
+    </el-table-column>
+    <el-table-column v-if="props.tableBtnGroup.length" label="操作" :align="props.tableColumnProperty.align">
+      <template #default="scope">
+        <el-button v-for="(btn, index) in props.tableBtnGroup"
+        :key="index" size="small"
+        @click="handleClick(scope.$index, scope.row, btn.param)"
+        :class="btn.className"
+          >{{btn.name}}</el-button
+        >
+      </template>
+    </el-table-column>
+  </el-table>
+  <!-- <ul v-infinite-scroll="load" class="infinite-list" style="overflow: auto">
+    <li v-for="i in count" :key="i" class="infinite-list-item">{{ i }}</li>
+  </ul> -->
+</template>
+
+<script setup lang="ts">
+//表格参数
+const tablePropertyDefault={
+  height: "100%",
+  maxHeight: "100%",
+  stripe: true,
+  border: true,
+  highlightCurrentRow: false,
+  rowClassName: "rowClass",
+  headerRowClassName: "headerRowClass",
+  tooltipEffect: "light",
+  showSummary: false,
+  rowKey:""
+}
+const props = defineProps({
+  //表头参数数组
+  tableHeader: {
+    type: Array,
+    default: [],
+  },
+  //表格参数
+  tableProperty: {
+    type: Object,
+    default: {
+      height: "100%",
+      maxHeight: "100%",
+      stripe: true,
+      border: true,
+      highlightCurrentRow: false,
+      rowClassName: "rowClass",
+      headerRowClassName: "headerRowClass",
+      tooltipEffect: "light",
+      showSummary: false,
+      rowKey:""
+    },
+  },
+  //公共表头参数
+  tableColumnProperty: {
+    type: Object,
+    default: {
+      width: "",
+      fixed: "",
+      sortable: false,
+      showOverflowTooltip: false,
+      align: "center",
+      headerAlign: "",
+    },
+  },
+  tableBtnGroup:{
+    type:Array,
+    default:[
+    // {
+      // name:"编辑",     //按钮名称
+      // className:"editBtn",  //按钮class样式  可以在父组件中定义好此class样式
+      // param:2    //按钮类型参数
+    // }
+    ]
+  },
+  //表格数据
+  tableData: {
+    type: Array,
+    default: [],
+  },
+});
+//向父组件传参 btnClick：点击按钮后    load  触发下拉加载
+const emit = defineEmits(["btnClick","load"]);
+//按钮点击index为当前行序号 row 为当前行 param按钮类型判断参数由父组件传过来
+const handleClick =(index: number, row:Object , param:number) => {
+  emit("btnClick",row,param)
+}
+
+const rowStyle = (row:Object,rowIndex:number) => {
+  let styleJson:Object={
+    height:'50px',
+    fontSize:"14px",
+    color:"#101116"
+  };
+  return styleJson
+}
+
+//表格行class样式 可通过父组件直接传class名称修改当前行样式
+const tableRowClassName = (row:Object,rowIndex:number) => {
+  if (row.row.rowClass) {
+    return row.row.rowClass
+  }
+  return ''
+}
+
+const cellClassName= (row:Object) => {
+  // console.log(row.row)
+  // console.log(row.column)
+  // console.log(row.rowIndex)
+  // console.log(row.columnIndex)
+}
+//滚动分页加载
+const load = () => {
+  emit("load",true)
+}
+</script>
+
+<style scoped lang="scss">
+.infinite-list {
+  height: 300px;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.infinite-list .infinite-list-item {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  background: var(--el-color-primary-light-9);
+  margin: 10px;
+  color: var(--el-color-primary);
+}
+.infinite-list .infinite-list-item + .list-item {
+  margin-top: 10px;
+}
+::v-deep.el-table .rowClass {
+  height: 40px;
+  font-size: 14px;
+  color: #101116;
+}
+::v-deep.el-table .headerRowClass {
+  height: 40px;
+  background: #ffffff;
+  font-size: 14px;
+  font-weight: bold;
+  color: #101116;
+}
+::v-deep.el-table .editBtn {
+  background: #FFFFFF;
+  border: 1px solid #F79EC6;
+  box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.06);
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #AC014D;
+}
+
+::v-deep.el-table .delBtn {
+  background: #EB2F3B;
+  box-shadow: 0px 3px 3px 0px rgba(0,0,0,0.06);
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #FFFFFF;
+  border: none;
+}
+</style>

src/main.ts

@@ -55,3 +55,7 @@ import { createPinia } from 'pinia'
 app.use(createPinia())
 
 app.use(router).mount('#app')
+
+import elTableInfiniteScroll from 'el-table-infinite-scroll';
+
+app.use(elTableInfiniteScroll);

src/views/table/index copy.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="app-container scroll-y">
+    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border highlight-current-row>
+      <el-table-column align="center" label="ID" width="95">
+        <template #default="scope">
+          {{ scope.$index }}
+        </template>
+      </el-table-column>
+      <el-table-column label="Title">
+        <template #default="scope">
+          {{ scope.row.title }}
+        </template>
+      </el-table-column>
+
+      <el-table-column label="Author" width="110" align="center">
+        <template #default="scope">
+          <span>{{ scope.row.author }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="Pageviews" width="110" align="center">
+        <template #default="scope">
+          {{ scope.row.pageviews }}
+        </template>
+      </el-table-column>
+      <el-table-column label="Status" width="110" align="center">
+        <template #default="scope">
+          <el-tag :type="statusFilter(scope.row.status)">{{ statusFilter(scope.row.status) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
+        <template #default="scope">
+          <i class="el-icon-time" />
+          <span>{{ scope.row.display_time }}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { getList } from '@/api/table'
+import { ObjTy } from '~/common'
+const statusFilter = (status: string) => {
+  const statusMap: ObjTy = {
+    published: 'success',
+    draft: 'info',
+    deleted: 'danger'
+  }
+  return statusMap[status]
+}
+const state = reactive({
+  list: null,
+  listLoading: true
+})
+
+onBeforeMount(() => {
+  fetchData()
+})
+
+const fetchData = () => {
+  state.listLoading = true
+  getList({}).then((response: ObjTy) => {
+    state.list = response.data?.data.items
+    state.listLoading = false
+  })
+}
+//导出属性到页面中使用
+const { list, listLoading } = toRefs(state)
+</script>
+
+<style scoped lang="scss"></style>

src/views/table/index.vue

@@ -1,71 +1,152 @@
 <template>
   <div class="app-container scroll-y">
-    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border highlight-current-row>
-      <el-table-column align="center" label="ID" width="95">
-        <template #default="scope">
-          {{ scope.$index }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Title">
-        <template #default="scope">
-          {{ scope.row.title }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="Author" width="110" align="center">
-        <template #default="scope">
-          <span>{{ scope.row.author }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="Pageviews" width="110" align="center">
-        <template #default="scope">
-          {{ scope.row.pageviews }}
-        </template>
-      </el-table-column>
-      <el-table-column label="Status" width="110" align="center">
-        <template #default="scope">
-          <el-tag :type="statusFilter(scope.row.status)">{{ statusFilter(scope.row.status) }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
-        <template #default="scope">
-          <i class="el-icon-time" />
-          <span>{{ scope.row.display_time }}</span>
-        </template>
-      </el-table-column>
-    </el-table>
+    <tableTemp :tableHeader="state.list" :tableProperty="{rowKey:'ID'}" :tableData="tableData" :tableBtnGroup="tableBtnGroup" @btnClick="btnClick" @load="loadMore"></tableTemp>
   </div>
 </template>
 
 <script setup lang="ts">
-import { getList } from '@/api/table'
-import { ObjTy } from '~/common'
-const statusFilter = (status: string) => {
-  const statusMap: ObjTy = {
-    published: 'success',
-    draft: 'info',
-    deleted: 'danger'
-  }
-  return statusMap[status]
-}
+import tableTemp from "@/components/tableTemp/index.vue";
+import { ref } from 'vue';
+
 const state = reactive({
-  list: null,
+  list: [{label:"序号",key:"ID",sortable:true},{label:"姓名",key:"NAME",},{label:"成绩",key:"score",sortable:true,lableClass:'scoreColumn'}],
   listLoading: true
 })
+const tableData = ref(
+                    [{
+                    ID:0,
+                    NAME:"张三",
+                    score:'100',
+                    children:[
+                      {
+                      ID:2,
+                      NAME:"王麻子",
+                      score:'50',
+                      rowClass:"warning-row"
+                    }
+                    ]
+                  },{
+                    ID:1,
+                    NAME:"李四三",
+                    score:'80'
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  },{
+                    ID:2,
+                    NAME:"王麻子",
+                    score:'50',
+                    rowClass:"warning-row"
+                  }])
+const tableBtnGroup = ref(
+  [
+    {
+      name:"编辑",
+      className:"editBtn",
+      param:2
+    },
+    {
+      name:"删除",
+      className:"delBtn",
+      param:3
+    }
+  ]
+)
 
-onBeforeMount(() => {
-  fetchData()
-})
+const btnClick = (row,index)=>{
+  console.log(row)
+  console.log(index)
 
-const fetchData = () => {
-  state.listLoading = true
-  getList({}).then((response: ObjTy) => {
-    state.list = response.data?.data.items
-    state.listLoading = false
-  })
 }
-//导出属性到页面中使用
-const { list, listLoading } = toRefs(state)
+
+const loadMore = (type)=>{
+  console.log(type)
+}
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+::v-deep.el-table .scoreColumn {
+  background: #EB2F3B!important;
+}
+::v-deep.el-table .warning-row {
+  background-color: #EB2F3B!important;
+}
+::v-deep.el-table .success-row {
+  --el-table-tr-bg-color: var(--el-color-success-light-9)
+}
+</style>