分页封装表格Ant Design Vue

<template>   <div>     <s-table       ref="table"       size="default"       rowKey="id"       :columns="columns"       :data="loadData"       :alert="true"       :rowSelection="rowSelection"       showPagination="auto"     >       <span slot="serial" slot-scope="text, record, index">         {{ index + 1 }}       </span>       <span slot="status" slot-scope="text">         <a-badge :status="text | statusTypeFilter" :text="text | statusFilter" />       </span>       <span slot="description" slot-scope="text">         <ellipsis :length="12" tooltip>{{ text }}</ellipsis>       </span>     </s-table>   </div> </template>
<script> import { STable, Ellipsis } from '@/components' import { getRoleList } from '@/api/manage' import { postUserControl1 } from '@/services/http-service' const columns = [   {     title: '序号',     scopedSlots: { customRender: 'serial' }   },   {     title: '服务器标识',     dataIndex: 'serverName'   },   {     title: '角色ID',     dataIndex: 'playerId',     width: '120px',     scopedSlots: { customRender: 'playerId' }   },   {     title: '账号名',     dataIndex: 'userId',     scopedSlots: { customRender: 'userId' }   },   {     title: '角色名',     dataIndex: 'userName',     scopedSlots: { customRender: 'userName' }   },   {     title: '金币',     dataIndex: 'gold',     sorter: true,     needTotal: true,     customRender: (text) => text   },   {     title: '仙玉',     dataIndex: 'fairyJade',     sorter: true,     needTotal: true,     customRender: (text) => text   },   {     title: '角色状态',     dataIndex: 'userSatus',     scopedSlots: { customRender: 'userSatus' }   },   {     title: '最后登录时间',     dataIndex: 'last_time',     sorter: true   } ]
const statusMap = {   0: {     status: 'success',     text: '正常'   },   1: {     status: 'processing',     text: '封禁'   } }
export default {   name: 'TableList',   components: {     STable,     Ellipsis   },   data () {     this.columns = columns     return {       serverList: [], // 获取所有大区       userControlList: [], // 获取在线角色统计数据       loadDatas: {}, // 数据赋值       promiseObj: {},       // create model       visible: false,       confirmLoading: false,       mdl: null,       // 高级搜索 展开/关闭       advanced: false,       // 查询参数       queryParam: {},       // 加载数据方法 必须为 Promise 对象       loadData: parameter => {         const requestParameters = Object.assign({}, parameter, this.queryParam)         console.log(parameter)         console.log('loadData request parameters:', requestParameters)         return postUserControl1(requestParameters).then((result) => {         // console.log(result.data)         const loadDatas = {           data: result.data.data.list,           pageNo: result.data.pageNo,           pageSize: result.data.pageSize,           totalCount: result.data.totalCount,           totalPage: result.data.totalPage         }         console.log(loadDatas)         return loadDatas       })       .catch((error) => {         return error       })       },       selectedRowKeys: [],       selectedRows: []     }   },   filters: {     statusFilter (type) {       return statusMap[type].text     },     statusTypeFilter (type) {       return statusMap[type].status     }   },   created () {     getRoleList({ t: new Date() })   },   computed: {     rowSelection () {       return {         selectedRowKeys: this.selectedRowKeys,         onChange: this.onSelectChange       }     }   },   mounted () {   },   methods: {
  } } </script>

标签：Vue,return,title,text,Ant,Design,dataIndex,data,result
来源： https://www.cnblogs.com/zjxzhj/p/14692785.html