跳至主要內容

SpPaginationTable 分页表格

王金城大约 4 分钟

集成 查询表单、ELPagination 分页 组件，进行了部分功能封装，适配系统内标准表格页面。

使用要点

使用本组件你要定义两个对象：请求参数 和 结果集，为了方便使用框架内已经创建了 BasePageVO 类型，请求参数 可以继承此类型，如下所示：

// 声明一个请求类型
interface UserListVO extends BasePageVO {
  userId: string;
}

// 创建请求对象
const userListVO = ref<UserListVO>({
  pageNum: 1,
  pageSize: 10,
});

请求参数中的 pageNum、pageSize 要使用双向绑定 v-model 的方式分别与 current-page、page-size 绑定，详看 基础用法 代码块中的 53,54 行

基础用法

<script setup lang="ts">
import { ref } from 'vue';
import SpPaginationTable from '@/components/data/sp-pagination-table/SpPaginationTable.vue';
import SpDateTimeRange from '@/components/form/sp-date/SpDateTimeRange.vue';
import { ClientOnly } from 'vuepress/client';

const loading = ref(false);

type TableDataType = {
  date: string;
  name: string;
  state: string;
  city: string;
  address: string;
  zip: string;
  tag: string;
};

const form = ref<BasePageVO>({
  pageNum: 1,
  pageSize: 10,
});
const tableData = ref<TableDataType[]>([]);
const total = ref(0);

const remoteMethod = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    let data: TableDataType[] = [],
      max = (form.value.pageNum - 1) * form.value.pageSize + form.value.pageSize;
    for (let i = (form.value.pageNum - 1) * form.value.pageSize; i < (max > 356 ? 356 : max); i++) {
      var random = Math.random();
      data.push({
        date: '2016-05-03',
        name: `Tom${i}`,
        state: 'California',
        city: 'Los Angeles',
        address: `No. 189, Grove St, Los Angeles ${i + random}`,
        zip: `CA 90036${i}`,
        tag: `Home_${i}`,
      });
    }
    tableData.value = data;
    total.value = 356;
  }, 500);
};
</script>

<template>
  <client-only>
    <sp-pagination-table
      :form-model="form"
      v-model:current-page="form.pageNum"
      v-model:page-size="form.pageSize"
      :total="total"
      :loading="loading"
      :data="tableData"
      @query="remoteMethod"
    >
      <template #formDefault>
        <el-form-item label="创建时间" prop="dateRange">
          <sp-date-time-range v-model="form.dateRange"></sp-date-time-range>
        </el-form-item>
      </template>
      <template #formAdditional>
        <el-form-item label="主叫号码" prop="a">
          <el-input v-model="form.a" />
        </el-form-item>
        <el-form-item label="主叫号码" prop="b">
          <el-input v-model="form.b" />
        </el-form-item>
        <el-form-item label="主叫号码" prop="c">
          <el-input v-model="form.c" />
        </el-form-item>
      </template>
      <template #tableHandleBar>
        <el-button link>测试一个</el-button>
        <el-button link>测试2个</el-button>
        <el-button link>测试3个</el-button>
      </template>
      <template #tableColumn>
        <el-table-column fixed type="selection" width="55" />
        <el-table-column fixed prop="date" label="Date" width="150" />
        <el-table-column prop="name" label="Name" width="120" />
        <el-table-column prop="state" label="State" width="120" />
        <el-table-column prop="city" label="City" width="120" />
        <el-table-column prop="address" label="Address" min-width="600" />
        <el-table-column prop="zip" label="Zip" width="120" />
        <el-table-column prop="tag" label="Tag" width="120" />
        <el-table-column fixed="right" label="操作" width="120">
          <template #default>
            <el-button link type="primary" size="small">Detail</el-button>
            <el-button link type="primary" size="small">Edit</el-button>
          </template>
        </el-table-column>
      </template>
    </sp-pagination-table>
  </client-only>
  {{ form }}
</template>

服务端排序

  1. 想要启用服务端排序功能只需添加属性 :server-sort="true" 即可。
  2. formModel 使用双向绑定
  3. 需要排序的列开启排序功能，即：:sortable="true"

重要

formModel 必须使用双向绑定，即：v-model:form-model。

  <SpPaginationTable
    v-model:form-model="form"
    v-model:current-page="form.pageNum"
    v-model:page-size="form.pageSize"
    :total="tableData?.total ?? 0"
    :data="tableData?.list"
    :loading="loading"
    :server-sort="true"
    @query="queryHandler"
  >
    <template #tableColumn>
      <ElTableColumn
        prop="transferCode"
        label="单号"
        :formatter="columnFormatter"
        :sortable="true"
      />
    </template>
  </SpPaginationTable>

API

属性

仅实现 ELTable 的部分属性，详情可以查看官方文档

属性名说明类型默认值
v-model:formModel表单数据对象object-
loading是否在加载中booleanfalse
total总条数number-
v-model:current-page当前页数number-
v-model:page-size每页显示条目个数number-
data显示的数据array-
rowKey行数据的 Key，用来优化 Table 的渲染； 在使用reserve-selection功能与显示树形数据时，该属性是必填的。 类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。function(row) | string-
defaultSort默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列，order 指定默认排序的顺序object-
toggleRowSelectionOnClick点击行是否切换选中状态booleanfalse
useDefaultOverflowTooltip是否使用我们自己默认的溢出提示，如果为 true 那么可以不填写 showOverflowTooltip 参数即可展示溢出效果booleanfalse
showOverflowTooltip是否隐藏额外内容并在单元格悬停时使用 Tooltip 显示它们。这将影响全部列的展示。boolean-
tooltipEffect溢出的 tooltip 的 effectstring | dark | lightdark
tooltipOptions溢出 tooltip 的选项object-
showSummary是否在表尾显示合计行booleanfalse
sumText显示摘要行第一列的文本stringSum
summaryMethod自定义的合计计算方法Function-
spanMethod合并行或列的计算方法Function-
hideHeader是否隐藏表头booleantrue
lineHeightSelector是否显示行高选择器booleantrue
highlightCurrentRow是否要高亮当前行booleanfalse
defaultExpandAll是否要展开 type=expand 的行booleanfalse
serverSort是否要使用服务端排序，如果开启服务端排序，那么需要将表单数据使用双向绑定，即： v-model:form-modelbooleanfalse

插槽

插槽名说明子标签
formDefault查询表单插槽 - 默认插槽，首行表单插槽FormItem
formAdditional查询表单插槽 - 扩展查询条件FormItem
tableHandleBar表格操作按钮栏-
tableColumn表格列数据TableColumn
tableAppend插入至表格最后一行之后的内容， 如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。 若表格有合计行，该 slot 会位于合计行之上。-

事件

事件名说明回调参数
query触发查询事件，点击查询按钮、表单内回车、翻页、修改页大小-
selectionChange当选择项发生变化时会触发该事件，开启多选时会实时返回勾选的全部数据selection
sortChange当表格的排序条件发生变化的时候会触发该事件{ column, prop, order }
rowClick当某一行被点击时会触发该事件row, column, event
rowDblclick当某一行被双击时会触发该事件row, column, event