wip: crud table

mock/api/post.js

@@ -65,10 +65,14 @@ export default [
       const { title, pageNo, pageSize } = data.query
       let pageData = []
       let total = 60
-      const filterData = posts.filter((item) => item.title.includes(title))
+      const filterData = posts.filter((item) => item.title.includes(title) || (!title && title !== 0))
       if (filterData.length) {
-        while (pageData.length < pageSize) {
+        if (pageSize) {
-          pageData.push(filterData[Math.round(Math.random() * (filterData.length - 1))])
+          while (pageData.length < pageSize) {
+            pageData.push(filterData[Math.round(Math.random() * (filterData.length - 1))])
+          }
+        } else {
+          pageData = filterData
         }
         pageData = pageData.map((item, index) => ({
           id: pageSize * (pageNo - 1) + index + 1,

src/components/table/CrudTable.vue

@@ -44,31 +44,52 @@ const props = defineProps({
     type: Array,
     required: true,
   },
-  queryForm: {
+  /** queryBar中的参数 */
+  queryItems: {
     type: Object,
-    required: true,
+    default() {
+      return {}
+    },
   },
+  /** 补充参数（可选） */
+  extraParams: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  /**
+   * ! 约定接口入参出参
+   * * 分页模式需约定分页接口入参
+   *    @pageSize 分页参数：一页展示多少条，默认10
+   *    @pageNo   分页参数：页码，默认1
+   * * 需约定接口出参
+   *    @pageData 分页模式必须,非分页模式如果没有pageData则取上一层data
+   *    @total    分页模式必须，非分页模式如果没有total则取上一层data.length
+   */
   getData: {
     type: Function,
     required: true,
   },
 })
 
-const emit = defineEmits(['update:queryForm', 'onChecked'])
+const emit = defineEmits(['update:queryItems', 'onChecked'])
 const loading = ref(false)
-const initQuery = { ...props.queryForm }
+const initQuery = { ...props.queryItems }
 const tableData = ref([])
-const pagination = reactive({ page: 1, pageSize: 10, itemCount: 100 })
+const pagination = reactive({ page: 1, pageSize: 10 })
 
-async function handleQuery(extraParams = {}) {
+async function handleQuery() {
   try {
     loading.value = true
-    const res = await props.getData(
+    let paginationParams = {}
-      { ...props.queryForm, ...extraParams },
+    // 如果非分页模式或者使用前端分页,则无需传分页参数
-      { pageNo: pagination.page, pageSize: pagination.pageSize }
+    if (props.isPagination && props.remote) {
-    )
+      paginationParams = { pageNo: pagination.page, pageSize: pagination.pageSize }
-    tableData.value = res?.pageData || res
+    }
-    pagination.itemCount = res.total ?? res.length
+    const { data } = await props.getData({ ...props.queryItems, ...props.extraParams, ...paginationParams })
+    tableData.value = data?.pageData || data
+    pagination.itemCount = data.total ?? data.length
   } catch (error) {
     tableData.value = []
     pagination.itemCount = 0
@@ -82,22 +103,22 @@ function handleSearch() {
   handleQuery()
 }
 async function handleReset() {
-  emit('update:queryForm', { ...initQuery })
+  emit('update:queryItems', { ...initQuery })
   await nextTick()
   pagination.page = 1
   handleQuery()
 }
-function onChecked(rowKeys) {
-  if (props.columns.some((item) => item.type === 'selection')) {
-    emit('onChecked', rowKeys)
-  }
-}
 function onPageChange(currentPage) {
   pagination.page = currentPage
   if (props.remote) {
     handleQuery()
   }
 }
+function onChecked(rowKeys) {
+  if (props.columns.some((item) => item.type === 'selection')) {
+    emit('onChecked', rowKeys)
+  }
+}
 
 defineExpose({
   handleSearch,

src/views/examples/table/post/index.vue

@@ -8,15 +8,16 @@
 
     <CrudTable
       ref="$table"
-      v-model:query-form="queryForm"
+      v-model:query-items="queryItems"
+      :extra-params="extraParams"
       :scroll-x="1600"
       :columns="columns"
-      :get-data="getTableData"
+      :get-data="api.getPosts"
       @on-checked="onChecked"
     >
       <template #queryBar>
         <QueryBarItem label="标题" :label-width="50">
-          <n-input v-model:value="queryForm.title" type="text" placeholder="请输入标题" />
+          <n-input v-model:value="queryItems.title" type="text" placeholder="请输入标题" />
         </QueryBarItem>
       </template>
     </CrudTable>
@@ -32,22 +33,11 @@ import { renderIcon } from '@/utils/icon'
 import api from './api'
 
 const $table = ref(null)
-const queryForm = ref({
+/** queryBar参数 */
-  title: '',
+const queryItems = ref({})
-})
+/** 可选，用于补充参数  */
+const extraParams = ref({})
 
-async function getTableData(query = {}, pagination = {}) {
-  const { pageSize = 10, pageNo = 1 } = pagination
-  try {
-    // * 参数可自定义，如不需要后端分页则可以不传 pagination 相关参数
-    const res = await api.getPosts({ ...query, pageSize, pageNo })
-    if (res.code === 0) {
-      return Promise.resolve(res.data)
-    }
-  } catch (error) {
-    return Promise.reject(error)
-  }
-}
 // 选中事件
 function onChecked(rowKeys) {
   if (rowKeys.length) $message.info(`选中${rowKeys.join(' ')}`)