前沿

自动请求的核心就是通过给表格传入api属性，可以实现自动请求数据并渲染的功能，彻底解放前端。另外在项目中加以封装就可以实现彻底的表格后端配置化，使用起来也是很方便请看下面的示例。

例子

传入api属性

给FpiElTable组件传入 api属性就可以实现字段请求功能。api 属性入口必须是一个方法，且返回值内包含表格所要显示的 tableData数据，方法的入口可以提供一个params参数，用于获得请求传参，配合项目中封装好的接口 api可以实现很好的自动请求功能。
params: 代表除页码参数以外的请求参数，注意如果想传入会动态改变的请求参数那params必须是响应式的对象 resExpr 代表表格数据在请求返回值中的位置，默认是 data

<template>
    <FpiElTable
        :column="column"
        :api="reqGetData"
        :is-show-page="false"
        res-expr="data"
        :params="params"
    />
</template>

<script lang="ts" setup>
import type { tableColumnTs } from '@ued_fpi/element-plus-expand/es/src/fpi-el-table/types'
import mockRequests from '../../../../../api/mockAjax'

// 获取数据的接口
const reqGetData = (params: Record<string, any> = {}) =>
    mockRequests({
        url: '/tableDataMin',
        method: 'get',
        params
    })
const params = {
    stationCodes: 1,
    regionCodes: '3301',
}
const column: tableColumnTs[] = [
    {
        type: 'index',
        label: '序号',
        width: '60',
        align: 'center'
    },
    {
        prop: 'date',
        label: 'Date',
        width: '180'
    },
    {
        prop: 'name',
        label: 'Name',
        width: '180'
    },
    {
        prop: 'address',
        label: 'Address',
    },
]
</script>

显示代码

默认不请求

传入 isLazyRequest 属性，可以让表格默认不请求接口，配合表格的 reLoadTable 方法，主动触发表格获取数据。
当 params 改变时也可以手动触发reLoadTable 方法，更新表格数据。

<template>
    <FpiElTable
        :ref="(el:any) => fpiElTableDom = el"
        :column="column"
        :api="reqGetData"
        style="margin-bottom: 10px;"
        :is-show-page="false"
        is-lazy-request
        :params="params"
    />
    <ElButton @click="checkSend()">
        点击请求
    </ElButton>
</template>

<script lang="ts" setup>
import type { tableColumnTs } from '@ued_fpi/element-plus-expand/es/src/fpi-el-table/types'
import { ref } from 'vue'
import mockRequests from '../../../../../api/mockAjax'

// 获取数据的接口
const reqGetData = (params: Record<string, any> = {}) => {
    return mockRequests({
        url: '/tableDataMin',
        method: 'get',
        params
    })
}

const params = {
    stationCodes: 1,
    regionCodes: '3301',
}
const column: tableColumnTs[] = [
    {
        type: 'index',
        label: '序号',
        width: '60',
        align: 'center'
    },
    {
        prop: 'date',
        label: 'Date',
        width: '180'
    },
    {
        prop: 'name',
        label: 'Name',
        width: '180'
    },
    {
        prop: 'address',
        label: 'Address',
    }
]

const fpiElTableDom = ref()
const checkSend = () => {
    fpiElTableDom.value?.reLoadTable()
}
</script>

显示代码

页码的使用

pageReqExpr:可以设置相应的页码参数转化成请求中的传参的key值，默认是： { pageSizes: 'pageSize', currentPage: 'pageNum' }
page-init: 内可以传入需要初始化的页码数据，比如第几页，页面size，默认是：{ pageSizes: 10, currentPage: 1, total: 0, pageSizesArr: [10, 20, 30, 50] }
page-total-expr: 参数对应的是total参数在返回对象中的位置，默认为 'total'，页码事件看文档0.8.16 setPage: 方法可以用于手动设置组件的当前页码参数并更新，入参是

{
    pageSizes?: number // 每页显示条数
    currentPage?: number // 当前页
    total?: number // 总共多少条数据
}

{
    pageSizes?: number // 每页显示条数
    currentPage?: number // 当前页
    total?: number // 总共多少条数据
}

也可以传入 pageParams，组件会动态监听其变化来更新内部页码参数，但是需要主动促发reLoadTable 方法更新数据。

<!--
 * @Author: mjh
 * @Date: 2023-04-26 18:43:50
 * @LastEditors: mjh
 * @LastEditTime: 2023-09-19 11:42:47
 * @Description:
-->
<template>
    <el-button @click="initPage()">
        恢复到第一页
    </el-button>
    <FpiElTable
        :ref="(el:any) => fpiElTableDom = el"
        :column="column"
        :api="reqGetData"
        :params="params"
        page-total-expr="total"
        :page-init="{
            pageSizes: 5,
            currentPage: 1,
            total: 0,
            pageSizesArr: [5, 10, 20],
        }"
    />
</template>

<script lang="ts" setup>
import type { tableColumnTs } from '@ued_fpi/element-plus-expand/es/src/fpi-el-table/types'
import { ref } from 'vue'
import mockRequests from '../../../../../api/mockAjax'

// 获取数据的接口
const reqGetData = (data: Record<string, any> = {}) => {
    return mockRequests({
        url: '/tableDataMid',
        method: 'post',
        data
    })
}

const params = {
    stationCodes: 1,
    regionCodes: '3301',
}
const column: tableColumnTs[] = [
    {
        type: 'index',
        label: '序号',
        width: '60',
        align: 'center'
    },
    {
        prop: 'date',
        label: 'Date',
        width: '180'
    },
    {
        prop: 'name',
        label: 'Name',
        width: '180'
    },
    {
        prop: 'address',
        label: 'Address',
    }
]

const fpiElTableDom = ref()

const initPage = () => {
    fpiElTableDom.value?.setPage({
        currentPage: 1
    })
}
</script>

显示代码

页码默认偏移

current-page-offset: 但我们请求的页码，第一页所请求需要传入的页码并不是1而是0，或者其他时就需要传入页码偏移参数，代表实际页码参数相对于我们1的偏移值。
比如：我们请求的第1页，需要传的参数是0，那我们就传入:current-page-offset="-1"。

<template>
    <FpiElTable
        :ref="(el:any) => fpiElTableDom = el"
        :column="column"
        :api="reqGetData"
        :params="params"
        :current-page-offset="-1"
    />
</template>

<script lang="ts" setup>
import type { tableColumnTs } from '@ued_fpi/element-plus-expand/es/src/fpi-el-table/types'
import { ref } from 'vue'
import mockRequests from '../../../../../api/mockAjax'

// 获取数据的接口
const reqGetData = (data: Record<string, any> = {}) => {
    return mockRequests({
        url: '/tableDataMidOffset',
        method: 'post',
        data
    })
}

const params = {
    stationCodes: 1,
    regionCodes: '3301',
}
const column: tableColumnTs[] = [
    {
        type: 'index',
        label: '序号',
        width: '60',
        align: 'center'
    },
    {
        prop: 'date',
        label: 'Date',
        width: '180'
    },
    {
        prop: 'name',
        label: 'Name',
        width: '180'
    },
    {
        prop: 'address',
        label: 'Address',
    }
]

const fpiElTableDom = ref()
</script>

显示代码

过滤数据方法

filterMethod: 对于回传数据每条进行过滤操作类似于js filter的回调函数,方法参数是：row 对于每条数据的对象,index 索引,arr 整个表格数组。
方法返回一个布尔值，true/返回 false/去除。此方法可以很好的帮我们处理返回参数。

<template>
    <FpiElTable
        :column="column"
        :api="reqGetData"
        :is-show-page="false"
        :filter-method="filterMethod"
    />
</template>

<script lang="ts" setup>
import type { tableColumnTs } from '@ued_fpi/element-plus-expand/es/src/fpi-el-table/types'
import mockRequests from '../../../../../api/mockAjax'

// 获取数据的接口
const reqGetData = (data: Record<string, any> = {}) => {
    return mockRequests({
        url: '/tableDataMin',
        method: 'post',
        data
    })
}
const column: tableColumnTs[] = [
    {
        type: 'index',
        label: '序号',
        width: '60',
        align: 'center'
    },
    {
        prop: 'date',
        label: 'Date',
        width: '180'
    },
    {
        prop: 'name',
        label: 'Name',
        width: '180'
    },
    {
        prop: 'address',
        label: 'Address',
    }
]
const filterMethod = (row: Record<string, any>, index: number, arr: Array<Record<string, any>>) => {
    if (row.name === 'Tom') return true
    return false
}
</script>

显示代码

res预处理方法

resPretreatment:api自动请求模式res预处理方法可异步,需要传入async方法。
可以用于将复杂的res回调处理成需要表格渲染的table数组,也可用于代替resExpr参数。
方法入口是请求返回参数，方法要求返回值为table表格数组，用于显示表格。

<template>
    <FpiElTable
        :column="column"
        :api="reqGetData"
        :is-show-page="false"
        :res-pretreatment="resPretreatment"
    />
</template>

<script lang="ts" setup>
import type { tableColumnTs } from '@ued_fpi/element-plus-expand/es/src/fpi-el-table/types'
import mockRequests from '../../../../../api/mockAjax'

interface ResData {
    'name': 'Mark'
    'city': 'Los Angeles'
    'detail': {
        'name': string
        'value': string
    }[]
    'Part': {
        'name': string
        'value': string
    }[]
}

// 获取数据的接口
const reqGetData = (data: Record<string, any> = {}) => {
    return mockRequests({
        url: '/tableDataMix',
        method: 'post',
        data
    })
}
const column: tableColumnTs[] = [
    {
        type: 'index',
        label: '序号',
        width: '60',
        align: 'center'
    },
    {
        prop: 'name',
        label: 'Name',
    },
    {
        prop: 'detailName',
        label: 'detailName',
    },
    {
        prop: 'detail',
        label: 'detail',
    },
    {
        prop: 'PartName',
        label: 'PartName',
    },
    {
        prop: 'Part',
        label: 'Part',
    },
]

const resPretreatment = (res: { data: ResData }) => {
    const data = res.data
    if (!data) return []
    const returnData: {
        name: string
        detail: string
        detailName: string
        Part: string
        PartName: string
    }[] = []
    data.detail.forEach((item, index) => {
        returnData.push({
            name: data.name,
            detailName: item.name,
            detail: item.value,
            PartName: data.Part[index].name,
            Part: data.Part[index].value
        })
    })
    return returnData
}
</script>

显示代码

获取表格数据

getTableData: 对于api自动请求，那我们如果要获取表格数据的话就需要调用此方法，此方法可以传入一个参数：

undefined 获取当前显示的全部数据
'all' 获取全部数据，如果分页的话会主动请求接口获取 total 数量对应的数据
number 获取当前页第几条数据
{ pageSizes: number, currentPage: number } 获取对应页的，对应size条数据

<template>
    <FpiElTable
        :ref="(el:any) => fpiElTableDom = el"
        :column="column"
        :api="reqGetData"
        :is-show-page="false"
    />
</template>

<script lang="ts" setup>
import type { tableColumnTs } from '@ued_fpi/element-plus-expand/es/src/fpi-el-table/types'
import { onMounted, ref } from 'vue'
import mockRequests from '../../../../../api/mockAjax'

// 获取数据的接口
const reqGetData = (data: Record<string, any> = {}) => {
    return mockRequests({
        url: '/tableDataMin',
        method: 'post',
        data
    })
}
const column: tableColumnTs[] = [
    {
        type: 'index',
        label: '序号',
        width: '60',
        align: 'center'
    },
    {
        prop: 'date',
        label: 'Date',
        width: '180'
    },
    {
        prop: 'name',
        label: 'Name',
        width: '180'
    },
    {
        prop: 'address',
        label: 'Address',
    }
]

const fpiElTableDom = ref()

onMounted(() => {
    console.log('getTableData:', fpiElTableDom.value?.getTableData('all'))
})
</script>

显示代码

贡献者：

水产品-马佳辉

前沿 ​

例子 ​

传入api属性 ​

默认不请求 ​

页码的使用 ​

页码默认偏移 ​

过滤数据方法 ​

res预处理方法 ​

获取表格数据 ​

贡献者： ​

前沿

例子

传入api属性

默认不请求

页码的使用

页码默认偏移

过滤数据方法

res预处理方法

获取表格数据

贡献者：