Ant Design Vue 表单组件table之＜s-table＞

最新推荐文章于 2025-11-07 01:07:56 发布

原创最新推荐文章于 2025-11-07 01:07:56 发布 · 1w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js

Vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

Ant Design Vue

2 篇文章

订阅专栏

本文介绍了Ant Design Vue中的s-table组件，该组件在使用上简化了分页处理，只需后端返回相应参数即可。查询功能通过设置queryParam与columns对应字段匹配实现，排序功能通过传递sortField和sortOrder参数给后端进行数据排序。此外，文章还展示了s-table的查询、排序和分页配置示例代码。

代码如下：

    # 查询条件
    <a-form layout="inline">
      <a-row :gutter="48">
        <template v-if="advanced">
          <a-col :md="8" :sm="24">
             <a-form-item label="id">
               <a-input v-model="queryParam.id" allow-clear style="width: 100%"/>
             </a-form-item>
           </a-col>
       	  <a-col :md="8" :sm="24">
            <a-form-item label="日期">
             <a-range-picker v-model="queryParam.updateTime" showTime format="YYYY-MM-DD HH:mm:ss" style="width: 100%" placeholder="请输入日期"/>
       	    </a-form-item>
          </a-col>
           <a-col :md="8" :sm="24">
                <a-form-item label="类型">
                  <a-select v-model="queryParam.do" placeholder="请选择" default-value="0">
                    <a-select-option value="">全部</a-select-option>
                    <a-select-option value="0">是</a-select-option>
                    <a-select-option value="1">否</a-select-option>
                  </a-select>
                </a-form-item>
             </a-col>
         </template>
     <a-col :md="!advanced && 8 || 24" :sm="24">
       <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
           <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
       </span>
      </a-col>
    </a-row>
   </a-form>
<template>
  <s-table
    ref="table"
    size="default"
    :columns="columns"
    :data="loadData"
  >
  </s-table>
</template>

<script>
  import { STable } from '@/components'
  # 分装的方法
  import { getUserList } from '@/api/user'
  export default {
    components: {
      STable
    },
    data() {
      return {
        columns: [
          {
            title: 'id',
            align: 'center',
            dataIndex: 'id'
          },
          {
            title: '名称',
            align: 'center',
            dataIndex: 'name'
          },
          {
            title: '状态',
            align: 'center',
            dataIndex: 'status',
          },
          {
            title: '更新时间',
            align: 'center',
            dataIndex: 'updateTime',
            sorter: true
          }
        ],
        // 查询条件参数
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
          const requestParameters = Object.assign({}, parameter, this.queryParam)
          return getUserList(requestParameters)
          .then(res => {
            console.log(res)
            return res.data
          })
        }
      }
    }
  }
</script>

介绍

s-table 和官网的 a-table相比，目前发现，就是不用处理分页，只要后端返回相应参数即可。
查询，只要确保 queryParam的属性和columns中对应的字段一致即可。
排序，s-table 表单的排序，会向后端传输两个参数，sortField与sortOrder。sortField代表排序的字段，sortOrder代表是升序还是降序，如下是升序。分页传的参数为 pageNo和pagesize。如下：
后台传回来的参数格式，包括四个分页需要用到的参数，如下：