知识的殿堂

Appearance

On this page

基于常见场景需要的组合式api ​

useTable ​

加载数据时使用a-table组件，可以得到通用的配置参数

TIP

使用scrollY即可设定tbody的高度与a-table的高度相关，这时候需要设置ref="tableRef"

INFO

ℹ️ option新增 noMarginBottom 参数，用于控制是否需要分页器底部的margin，常见场景是在弹窗中使用，此时不需要margin

vue
<template>
    <div class="h-full overflow-hidden flex flex-col">
        <OperationBar
            v-model:value="q"
            @search="onSearch(loadList)"
            @refresh="loadList"
            placeholder="搜索"></OperationBar>
        <a-table
            class="flex-1"
            ref="tableRef"
            :row-selection="{
                preserveSelectedRowKeys: true,
                selectedRowKeys: selectedValues,
                onChange: onSelectChange,
                type: multiple ? 'checkbox' : 'radio'
            }"
            :scroll="{ y: scrollY }"
            :loading="loading"
            rowKey="id"
            :columns="columns"
            @change="onTableChange"
            :dataSource="dataSource"
            :pagination="pagination">
        </a-table>
    </div>
</template>
<script lang="ts" setup>
    import { useTable } from "@/utils/composition"
    const { q, loading, pagination, onSearch, scrollY, loadData } = useTable({
        pagination: { pageSize: 10 },
        noMarginBottom: true,
        loadData: async () => {
            const res = await GetFormList({
                index: pagination.current,
                size: pagination.pageSize,
                groupId: selectedGroup.value,
                q: q.value
            })
            dataSource.value = res.data
            // return res 则会处理pagination.toatal
            return res
        }
    })
</script>

useForm ​

提供一些常用默认表单配置，目前可配置的参数不多，后续根据表单规范逐步补充

vue
<template>
    <a-form v-bind="useForm"></a-form>
</template>
<script lang="ts" setup>
    import {useForm} from "@/utils/composition";
</script>

useGuide ​

新手引导的通用配置

vue
<template>
    <a-tour :open="showGuide" :steps="tourSteps"></a-tour>
</template>
<script lang="ts" setup>
    import {useGuide} from "@/utils/composition";
    const {showGuide, closeGuide} = useGuide('staffManagement')
    const tourSteps = [
        // ...step configs
    ]
</script>