FitsTable 表格

基本使用

基础表格

基础表格

通过 columns 传入对象数组，配置表格的列，其中 filed 设置列的字段名，title 设置列标题， width 定义列宽。通过 data 配置表格的数据，对象的键与列字段名相对应。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid">
        <template #tools>
            123
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名', },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    toolbarConfig: {
        tools: {
            enabled: true
        },
        slots: {
            tools: 'tools'
        }
    }
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

悬浮提示

悬浮提示

当内容过长时，通过配置 showOverflow=true 和 showHeaderOverflow=true 可以全局开启内容和表头悬浮提示。如果只需要个别列开启悬浮提示，则只为 columns 中的对象添加该属性即可。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名', },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320, showOverflow: true, showHeaderOverflow: true },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山北路快乐大道东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山北路快乐大道东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山北路快乐大道东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山北路快乐大道幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山北路快乐大道幸福小区7号楼102 ' },
    ],
    showOverflow: true,
}

const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

拖动列宽

拖动列宽

通过设置 columnConfig.resizable=true 开启可拖动调整列宽。注意：如果开启拖动列宽，建议通过设置 border='full' 显示表格的所有边框，以免造成样式上的缺漏或不美观。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名', },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址' },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    border: 'full',
    showOverflow: true,
    columnConfig: {
        resizable: true
    }
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

斑马纹表格

斑马纹表格

通过 stripe=true 开启斑马纹。另外，通过配置 rowConfig.isHover=true 开启当鼠标移到行时，高亮当前行。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()
const state = reactive({
})
const { }: any = toRefs(state);

const gridOptions: FitsTableProps = {
    stripe: true,
    rowConfig: {
        isHover: true,
    },
    columns: [
        { field: 'name', title: '姓名', },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>
.basic-table {
    padding: 0 $basePadding;
    background-color: #fff;
}
</style>

<style lang="scss">

</style>```

无边框表格

无边框表格

通过 border='none' 去掉表格的所有边框。可选值还有default（默认）, full（完整边框）, outer（外边框）, inner（内边框）。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    border: 'none',
    columns: [
        { field: 'name', title: '姓名', },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

带状态表格

带状态表格

通过配置 rowClassName，传入一个字符串或函数，给行附加类名。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    rowClassName: ({ row, rowIndex, $rowIndex }) => {
        if (rowIndex === 1) {
            return 'warning-row'
        } else if (rowIndex === 3) {
            return 'success-row'
        }
        return ''
    },
    columns: [
        { field: 'name', title: '姓名', },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">
.warning-row {
    background: #fdf6ec !important;
}

.success-row {
    background: #f0f9eb !important;
}
</style>```

固定列

固定列

当横向内容过多时，将列固定在左右两侧。给列对象配置 fixed，传入'left' 或 'right'，设置固定列的位置。（注意：如果列宽足够的情况下，固定列不会浮动显示。）

<template>
    <fits-table :option="fitsTablePro" class="FixColumnTable" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名', width: 200 },
        { field: 'phone', title: '电话', width: 300 },
        { field: 'birth', title: '出生日期', width: 250 },
        { field: 'address', title: '地址', width: 300, fixed: 'right' },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>
.FixColumnTable {
    :deep(.warning-row) {
        background-color: #fdf6ec;
    }

    :deep(.success-row) {
        background: #f0f9eb;
    }

    :deep(.operation) {
        display: flex;
    }
}
</style>

<style lang="scss">

</style>```

单选行

单选行

通过配置 rowConfig.isCurrent=true 属性，点击并选中行数据。之后由 current-change 事件来管理选中时触发的事件。

<template>
    <fits-table :option="fitsTablePro" @current-change="currentChange" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { ElMessage } from 'element-plus';
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'seq', type: 'seq' },
        { field: 'name', title: '姓名' },
        { field: 'phone', title: '电话' },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    rowConfig: {
        isCurrent: true
    }
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)

function currentChange({ rowIndex }: any) {
    ElMessage({
        message: `你选中了第 ${rowIndex + 1} 条数据`,
        type: 'success',
    })
}

</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

多选行

多选行

在 columns 属性中配置一个 type='checkbox' 的对象，即可实现多选功能。之后由 checkbox-change 事件来管理手动勾选行复选框时触发的事件；另外，通过配置 checkboxConfig.range = true 开启复选框范围选择功能（启用后通过鼠标在复选框的列内滑动选中或取消指定行）。本例还演示了通过配置 checkboxConfig.checkMethod 指定了禁用地址在'幸福小区'的勾选项。

<template>
    <fits-table :option="fitsTablePro" @checkbox-change="checkboxChange" @toolbar-button-click="toolbarButtonClick"
        ref="xGrid">
        <template #myButtons>
            <el-button @click="setAllChecked(true)">
                选中所有可选行
            </el-button>
            <el-button @click="setAllChecked(false)">
                清除所有勾选行
            </el-button>
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { ElButton, ElMessage } from 'element-plus';
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()
const gridOptions: FitsTableProps = {
    id: 'table2',
    columns: [
        { field: 'Checkbox', type: 'checkbox', width: 50 },
        { field: 'name', title: '姓名' },
        { field: 'phone', title: '电话' },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    checkboxConfig: {
        range: true,
        checkMethod
    },
    toolbarConfig: {
        slots: {
            buttons: 'myButtons'
        },
        // tools: {
        //     enabled: false
        // }
    },
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
// 手动勾选行的复选框时触发
function checkboxChange({ rowIndex }: any) {
    console.log('checkboxChange');
    ElMessage({
        message: `你选中了第 ${rowIndex + 1} 条数据`,
        type: 'success',
    })
}


function toolbarButtonClick({ code, button, $event }: any) {
    console.log($event);
}

function checkMethod({ row }: any) {
    // 禁用地址在“幸福小区”的勾选项
    return row.address.indexOf('幸福小区') === -1
}

function setAllChecked(isChecked: boolean) {
    xGrid.value.fitsTablePro.setAllCheckboxRow(isChecked)
}

</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

流体高度

流体高度

通过配置 maxHeight 为表格指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。

<template>
    <fits-table :option="fitsTablePro" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    maxHeight: 600,
    columns: [
        { field: 'Checkbox', type: 'checkbox', width: 50 },
        { field: 'name', title: '姓名', editRender: { name: 'input', defaultValue: '小明' } },
        { field: 'phone', title: '电话', editRender: { name: 'input', defaultValue: '13578459562' } },
        { field: 'birth', title: '出生日期', editRender: { name: 'input', defaultValue: '2006-11-07' } },
        { field: 'address', title: '地址', editRender: { name: 'input', defaultValue: '广东省广州市越秀区中山路快乐小区6号楼801' }, width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
    ],
    toolbarConfig: {
        buttons: [
            // 传了icon 于是识别到了vxe自带的类型
            { name: '添加数据', code: 'insert', icon: 'vxe-icon-search', status: 'primary', },
            { name: '删除数据', code: 'remove', icon: 'vxe-icon-delete', },
        ],
        // slots: {

        // },
        // tools: {
        //     enabled: false
        // }
    },
    checkboxConfig: {
        range: true,
    },
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

排序

排序

给 columns 里的对象配置 sortable=true 即可开启排序。另外，可通过给 columns 里面的对象配置 sortBy 属性，自定义排序方法。本例演示了姓名列通过名字的长度进行排序。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名', sortable: true, sortBy: sortByLength },
        { field: 'phone', title: '电话', sortable: true },
        { field: 'birth', title: '出生日期', sortable: true },
        { field: 'address', title: '地址', width: 320, sortable: true },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '欧阳星星', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
// 根据name的长度排序
function sortByLength({ row }: any) {
    return row.name.length
}

</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

筛选

筛选

给 columns 里的对象配置 filters 和 filterMethod，可以开启筛选表格数据。filters为对象数组，定义筛选条件。filterMethod 为筛选方法，该方法的返回值用来决定该行是否显示。

<template>
    <fits-table :option="fitsTablePro" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const filters = ref([{ data: '' }])

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名', filters: [{ label: '名字长度=2', value: '1' }, { label: '名字长度>=3', value: '2' }], filterMethod: filterNameMethod },
        { field: 'phone', title: '电话', filters: [{ label: '开头为137', value: '1' }, { label: '开头为132', value: '2' }, { label: '其他', value: '3' }], filterMethod: filterPhoneMethod },
        { field: 'birth', title: '出生日期' },
        {
            field: 'address', title: '地址', width: 320, filters: filters.value,
            filterRender: {
                name: 'ElInput',
                attrs: {
                    ref: 'inputRef',
                },
                props: {
                    clearable: true,
                    placeholder: '输入关键字',
                },
            },
            filterMethod: filterAddressMethod
        },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13224459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '13712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)

// 定义筛选名字列的返回方法
function filterNameMethod({ value, option, cellValue, row, column }: any) {
    if (value === '1') {
        return cellValue.length === 2
    } else {
        return cellValue.length >= 3
    }
}

// 定义筛选电话列的返回方法
function filterPhoneMethod({ value, cellValue }: any) {
    switch (value) {
        case '1':
            return cellValue.substr(0, 3) === '137'
        case '2':
            return cellValue.substr(0, 3) === '132'
        case '3':
            return cellValue.substr(0, 3) !== '132' && cellValue.substr(0, 3) !== '137'
    }
    return false
}

function filterAddressMethod({ value, option, cellValue, row, column }: any) {
    return cellValue.indexOf(option.data) !== -1
}
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

树结构

树结构

给 columns 里的对象配置 treeNode=true 指定该列为树节点。通过给 data 中的对象配置 children 属性，设置子节点。注意：这里还需要开启 treeConfig，哪怕没有属性，也要传一个空对象，否则子节点显示不出来。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()
const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '部门', width: 200, treeNode: true },
        { field: 'level', title: '权限标识', },
        { field: 'numner', title: '创建时间', },
        { field: 'rate', title: '修改时间', width: 150 },
    ],
    data: [
        {
            name: '入库管理',
            level: '',
            numner: '',
            rate: '',
        },
        {
            name: '系统管理',
            level: '',
            numner: '',
            rate: '',
            children: [
                {
                    name: '用户管理',
                    level: '',
                    numner: '',
                    rate: '',
                    children: [
                        { name: '用户新增', rate: '2022-10-12', numner: '2021-02-17', level: 'sys:user:add' },
                        { name: '用户编辑', rate: '2022-10-12', numner: '2021-02-17', level: 'sys:user:edit' },
                        { name: '用户删除', rate: '2022-10-12', numner: '2021-02-17', level: 'sys:user:delete' },
                    ]
                },
                {
                    name: '角色管理',
                    level: '',
                    numner: '',
                    rate: '',
                    children: [
                        { name: '总经理', rate: '2022-10-12', numner: '2021-02-17', level: 'sys:role:manager' },
                        { name: '副经理', rate: '2022-10-12', numner: '2021-02-17', level: 'sys:role:deputymanager' },
                        { name: '产品', rate: '2022-10-12', numner: '2021-02-17', level: 'sys:role:producer' },
                    ]
                },
                {
                    name: '菜单管理',
                    level: '',
                    numner: '',
                    rate: '',
                    children: [
                        { name: '研发中心组', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' },
                        { name: '客户中心', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' },
                        { name: '服务台', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' }
                    ]
                },
                {
                    name: '部门管理',
                    level: '',
                    numner: '',
                    rate: '',
                    children: [
                        { name: '研发中心组', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' },
                        { name: '客户中心', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' },
                        { name: '服务台', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' }
                    ]
                },
                {
                    name: '管理',
                    level: '',
                    numner: '',
                    rate: '',
                    children: [
                        { name: '研发中心组', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' },
                        { name: '客户中心', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' },
                        { name: '服务台', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' }
                    ]
                }
            ]
        },
        {
            name: '多级菜单',
            level: '',
            numner: '',
            rate: '',
            children: [
                { name: '产品A队', rate: 3, numner: 22, level: 2 },
                { name: '产品B队', rate: 5, numner: 25, level: 3 },
                { name: '产品C队', rate: 17, numner: 35, level: 4 }
            ]
        }
    ],
    treeConfig: {},
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)


</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

树结构-自定义图标

树结构-自定义图标

通过设置 treeConfig.iconOpen 和 treeConfig.iconClose 定义收起和打开树的显示图标。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()
const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '部门', width: 200, treeNode: true },
        { field: 'level', title: '权限标识', },
        { field: 'numner', title: '创建时间', },
        { field: 'rate', title: '修改时间', width: 150 },
    ],
    data: [
        {
            name: '入库管理',
            level: '',
            numner: '',
            rate: '',
        },
        {
            name: '系统管理',
            level: '',
            numner: '',
            rate: '',
            children: [
                {
                    name: '用户管理',
                    level: '',
                    numner: '',
                    rate: '',
                    children: [
                        { name: '用户新增', rate: '2022-10-12', numner: '2021-02-17', level: 'sys:user:add' },
                        { name: '用户编辑', rate: '2022-10-12', numner: '2021-02-17', level: 'sys:user:edit' },
                        { name: '用户删除', rate: '2022-10-12', numner: '2021-02-17', level: 'sys:user:delete' },
                    ]
                },
                {
                    name: '角色管理',
                    level: '',
                    numner: '',
                    rate: '',
                    children: [
                        { name: '总经理', rate: '2022-10-12', numner: '2021-02-17', level: 'sys:role:manager' },
                        { name: '副经理', rate: '2022-10-12', numner: '2021-02-17', level: 'sys:role:deputymanager' },
                        { name: '产品', rate: '2022-10-12', numner: '2021-02-17', level: 'sys:role:producer' },
                    ]
                },
                {
                    name: '菜单管理',
                    level: '',
                    numner: '',
                    rate: '',
                    children: [
                        { name: '研发中心组', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' },
                        { name: '客户中心', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' },
                        { name: '服务台', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' }
                    ]
                },
                {
                    name: '部门管理',
                    level: '',
                    numner: '',
                    rate: '',
                    children: [
                        { name: '研发中心组', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' },
                        { name: '客户中心', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' },
                        { name: '服务台', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' }
                    ]
                },
                {
                    name: '管理',
                    level: '',
                    numner: '',
                    rate: '',
                    children: [
                        { name: '研发中心组', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' },
                        { name: '客户中心', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' },
                        { name: '服务台', rate: '2021-02-17', numner: '2021-02-17', level: 'sys:role:producer' }
                    ]
                }
            ]
        },
        {
            name: '多级菜单',
            level: '',
            numner: '',
            rate: '',
            children: [
                { name: '产品A队', rate: 3, numner: 22, level: 2 },
                { name: '产品B队', rate: 5, numner: 25, level: 3 },
                { name: '产品C队', rate: 17, numner: 35, level: 4 }
            ]
        }
    ],
    treeConfig: {
        iconOpen: 'vxe-icon-square-minus',
        iconClose: 'vxe-icon-square-plus',
    },
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)


</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

树结构-懒加载

树结构-懒加载

通过配置 treeConfig.lazy=true 开启树形懒加载， 通过配置 treeConfig.loadMethod 定义异步加载子节点的方法。另外，还需要给 data 里的对象配置 hacChild=true 标识是否存在子节点，从而控制是否允许被点击，默认值为 false 不可点击。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

let i = 0

const loadMethod: any = ({ row }: any) => {
    // 异步加载子节点
    return new Promise(resolve => {
        setTimeout(() => {
            resolve([
                { id: row.id + 100000, parentId: row.id, name: '客户中心', rate: 9, numner: 24, level: 1 },
                { id: row.id + 150000, parentId: row.id, name: '服务中心', rate: 9, numner: 24, level: 1, hasChild: i < 2 }
            ])
            i++
        }, 500)
    })
}
const xGrid = ref<VxeGridInstance | any>()
const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '部门', width: 200, treeNode: true },
        { field: 'level', title: '绩效', },
        { field: 'numner', title: '考核分数', },
        { field: 'rate', title: '等级', width: 150 },
    ],
    data: [
        {
            name: '总经办',
            level: '',
            numner: '',
            rate: '',
            hasChild: true,
        },
        {
            name: '产品部',
            level: '',
            numner: '',
            rate: '',
            hasChild: true,
        },
        {
            name: '研发部',
            level: '',
            numner: '',
            rate: '',
        }
    ],
    treeConfig: {
        lazy: true,
        loadMethod
    },
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

表尾合计

表尾合计

通过配置 showFooter=true 开启表尾行。 再通过 footerMethod 定义表尾的数据获取方法，返回一个二维数组。另外，可以通过设置 footerRowClassName 给表尾行添加类名。

<template>
    <fits-table :option="fitsTablePro" class="SummaryTable" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    showFooter: true,
    footerMethod,
    footerRowClassName: 'footerRowClass',
    columns: [
        { field: 'name', title: '商品', },
        { field: 'price', title: '价格', },
        { field: 'number', title: '数量' },
    ],
    data: [
        { name: '雪糕', price: 5, number: 2 },
        { name: '牛奶', price: 3.5, number: 3 },
        { name: '饼干', price: 34, number: 4 },
        { name: '饮料', price: 12, number: 5 },
        { name: '蛋糕', price: 50, number: 6 },
    ],
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
function footerMethod({ data }: any) {
    let priceSum = 0
    let numberSum = 0
    data.map((item: any) => {
        priceSum += item.price
        numberSum += item.number
    })
    return [
        ['平均值', priceSum / data.length, numberSum / data.length],
        ['合计', priceSum, numberSum]
    ]
}

</script>
<style lang='scss' scoped>
.SummaryTable {
    :deep(.footerRowClass) {
        background-color: #f0f9eb !important;
    }
}
</style>

<style lang="scss">

</style>```

合并行、列

合并行、列

通过配置 mergeCells 合并指定的单元格，该值为一个对象数组，对象的属性包括row、col、rowspan、colspan。

<template>
    <fits-table :option="fitsTablePro" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    border: 'full',
    columns: [
        { field: 'name', title: '姓名', },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '暂无数据', birth: '暂无数据', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    mergeCells: [
        { row: 0, col: 2, rowspan: 2, colspan: 1 },
        { row: 4, col: 1, rowspan: 1, colspan: 2 }
    ]
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

自定义索引

自定义索引

给 columns 里的对象配置 type=seq 开启序号列。另外，可通过 seqConfig.seqMethod 自定义序列号。 本例演示了自定义序列号，序列号的间隔为2。

<template>
    <fits-table :option="fitsTablePro" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'seq', type: 'seq', },
        { field: 'name', title: '姓名', },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    seqConfig: {
        // 自定义序列号，序列间隔为2
        seqMethod: ({ rowIndex }) => {
            return 2 * rowIndex
        }
    }
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

数据代理

数据代理

通过配置 proxyConfig.ajax.query，返回一个Promise，响应结果通过resolve(props)返回，其中props.list存放列表数组。另外还需要通过 proxyConfig.props 配置获取的列表属性。没有开启分页的列表只需要配置 props.list 即可，例如配置了 props.list='myList', 那么Promise返回的对象中列表属性也需要命名为 myList。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'Checkbox', type: 'checkbox', width: 50 },
        { field: 'name', title: '姓名', editRender: { name: 'input', defaultValue: '小明' } },
        { field: 'phone', title: '电话', editRender: { name: 'input', defaultValue: '13578459562' } },
        { field: 'birth', title: '出生日期', editRender: { name: 'input', defaultValue: '2006-11-07' } },
        { field: 'address', title: '地址', editRender: { name: 'input', defaultValue: '广东省广州市越秀区中山路快乐小区6号楼801' }, width: 320 },
    ],
    formConfig: {
        items: [
            { field: 'name', title: '姓名', itemRender: { name: 'ElInput', props: { placeholder: '请输入姓名' } } },
        ]
    },
    proxyConfig: {
        enabled: true,
        form: true, // 启用表单代理
        autoLoad: false,
        ajax: {
            query: ({ form }) => {
                return new Promise(resolve => {
                    const TableList = [
                        {
                            "id": "530000198307057387",
                            "birth": "2000-12-01",
                            "phone": "13254548965",
                            "name": "张晓明",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "820000199611275163",
                            "birth": "2011-07-26",
                            "phone": "18752365489",
                            "name": "陈美美",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "81000019751226373X",
                            "birth": "1987-05-12",
                            "phone": "13784525698",
                            "name": "王明",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "12000020130303977X",
                            "birth": "1988-10-06",
                            "phone": "13784525698",
                            "name": "李晶晶",
                            "address": "广东省广州市天河区五山小路2街101"
                        },
                        {
                            "id": "510000201010286614",
                            "birth": "2011-07-26",
                            "phone": "18952364784",
                            "name": "王明",
                            "address": "广东省广州市天河区五山小路2街101"
                        },
                        {
                            "id": "310000200307208631",
                            "birth": "1987-05-12",
                            "phone": "18952364784",
                            "name": "王明",
                            "address": "广东省广州市天河区五山小路1街545"
                        },
                        {
                            "id": "340000197608296947",
                            "birth": "1987-05-12",
                            "phone": "18952364784",
                            "name": "黄白",
                            "address": "北京市朝阳区群街道办"
                        },
                    ]
                    setTimeout(() => {
                        resolve({
                            list: TableList
                        })
                    }, 500)
                })
            },
        },
        props: {
            list: 'list'
        }
    },
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

数据代理+自动加载

数据代理+自动加载表格数据

当页面渲染完成后默认会自动加载查询数据。如果不希望自动加载，则配置 autoLoad=false 并且可以通过几种方式触发查询：第一种方式，通过配置 toolbarConfig.tools 开启工具栏的工具列表，其中的 刷新数据按钮可以触发查询。第二种方式，可以在代码逻辑中通过获取表格实例并调用 commitProxy('query')方法触发查询。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid">
        <template #buttons>
            <el-button @click="queryData">
                手动查询数据
            </el-button>
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'Checkbox', type: 'checkbox', width: 50 },
        { field: 'name', title: '姓名', editRender: { name: 'input', defaultValue: '小明' } },
        { field: 'phone', title: '电话', editRender: { name: 'input', defaultValue: '13578459562' } },
        { field: 'birth', title: '出生日期', editRender: { name: 'input', defaultValue: '2006-11-07' } },
        { field: 'address', title: '地址', editRender: { name: 'input', defaultValue: '广东省广州市越秀区中山路快乐小区6号楼801' }, width: 320 },
    ],
    formConfig: {
        items: [
            { field: 'name', title: '姓名', itemRender: { name: 'ElInput', props: { placeholder: '请输入姓名' } } },
        ]
    },
    toolbarConfig: {
        tools: {
            export: false,
            fullscreen: false,
            custom: false,
            search: false,
            query: false
        },
        slots: {
            buttons: 'buttons'
        }
    },
    proxyConfig: {
        enabled: true,
        form: true, // 启用表单代理
        autoLoad: true, // 自动加载
        ajax: {
            query: () => {
                return new Promise(resolve => {
                    const TableList = [
                        {
                            "id": "530000198307057387",
                            "birth": "2000-12-01",
                            "phone": "13254548965",
                            "name": "张晓明",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "820000199611275163",
                            "birth": "2011-07-26",
                            "phone": "18752365489",
                            "name": "陈美美",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "81000019751226373X",
                            "birth": "1987-05-12",
                            "phone": "13784525698",
                            "name": "王明",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "12000020130303977X",
                            "birth": "1988-10-06",
                            "phone": "13784525698",
                            "name": "李晶晶",
                            "address": "广东省广州市天河区五山小路2街101"
                        },
                        {
                            "id": "510000201010286614",
                            "birth": "2011-07-26",
                            "phone": "18952364784",
                            "name": "王明",
                            "address": "广东省广州市天河区五山小路2街101"
                        },
                        {
                            "id": "310000200307208631",
                            "birth": "1987-05-12",
                            "phone": "18952364784",
                            "name": "王明",
                            "address": "广东省广州市天河区五山小路1街545"
                        },
                        {
                            "id": "340000197608296947",
                            "birth": "1987-05-12",
                            "phone": "18952364784",
                            "name": "黄白",
                            "address": "北京市朝阳区群街道办"
                        },
                    ]
                    setTimeout(() => {
                        resolve({
                            list: TableList
                        })
                    }, 500)
                })
            },
        },
        props: {
            list: 'list'
        }
    },
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)

function queryData() {
    xGrid.value?.fitsTablePro.commitProxy('query')
}
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

数据代理+表单默认值

数据代理+表单默认值

开启数据代理后，如果配置了表单并且需要给表单赋默认值，则需要将 proxyConfig.form 配置为 false(默认不配置也为false)，否则会报错且无法正确赋值。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'Checkbox', type: 'checkbox', width: 50 },
        { field: 'name', title: '姓名', editRender: { name: 'input', defaultValue: '小明' } },
        { field: 'phone', title: '电话', editRender: { name: 'input', defaultValue: '13578459562' } },
        { field: 'birth', title: '出生日期', editRender: { name: 'input', defaultValue: '2006-11-07' } },
        { field: 'address', title: '地址', editRender: { name: 'input', defaultValue: '广东省广州市越秀区中山路快乐小区6号楼801' }, width: 320 },
    ],
    formConfig: {
        // 会报错
        data: {
            name: '123'
        },
        items: [
            { field: 'name', title: '姓名', itemRender: { name: 'ElInput', props: { placeholder: '请输入姓名' } } },
        ]
    },
    proxyConfig: {
        enabled: true,
        form: true, // 必须关闭表单代理，否则无法赋表单默认值
        autoLoad: false,
        ajax: {
            query: ({ form }) => {
                return new Promise(resolve => {
                    // 文档看不到请求效果，所以用alert来展示
                    alert(`表单参数：${JSON.stringify(form)}`)
                    const TableList = [
                        {
                            "id": "530000198307057387",
                            "birth": "2000-12-01",
                            "phone": "13254548965",
                            "name": "张晓明",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "820000199611275163",
                            "birth": "2011-07-26",
                            "phone": "18752365489",
                            "name": "陈美美",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "81000019751226373X",
                            "birth": "1987-05-12",
                            "phone": "13784525698",
                            "name": "王明",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "12000020130303977X",
                            "birth": "1988-10-06",
                            "phone": "13784525698",
                            "name": "李晶晶",
                            "address": "广东省广州市天河区五山小路2街101"
                        },
                        {
                            "id": "510000201010286614",
                            "birth": "2011-07-26",
                            "phone": "18952364784",
                            "name": "王明",
                            "address": "广东省广州市天河区五山小路2街101"
                        },
                        {
                            "id": "310000200307208631",
                            "birth": "1987-05-12",
                            "phone": "18952364784",
                            "name": "王明",
                            "address": "广东省广州市天河区五山小路1街545"
                        },
                        {
                            "id": "340000197608296947",
                            "birth": "1987-05-12",
                            "phone": "18952364784",
                            "name": "黄白",
                            "address": "北京市朝阳区群街道办"
                        },
                    ]
                    setTimeout(() => {
                        resolve({
                            list: TableList
                        })
                    }, 500)
                })
            },
        },
        props: {
            list: 'list'
        }
    },
    toolbarConfig: {
        tools: {}
    }
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

数据代理+分页器

数据代理+分页器

通过配置 pagerConfig.enabled=true 开启分页，响应结果通过resolve(props)返回，其中props.total存放列表总数。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'Checkbox', type: 'checkbox', width: 50 },
        { field: 'name', title: '姓名', editRender: { name: 'input', defaultValue: '小明' } },
        { field: 'phone', title: '电话', editRender: { name: 'input', defaultValue: '13578459562' } },
        { field: 'birth', title: '出生日期', editRender: { name: 'input', defaultValue: '2006-11-07' } },
        { field: 'address', title: '地址', editRender: { name: 'input', defaultValue: '广东省广州市越秀区中山路快乐小区6号楼801' }, width: 320 },
    ],
    formConfig: {
        items: [
            { field: 'name', title: '姓名', itemRender: { name: 'ElInput', props: { placeholder: '请输入姓名' } } },
        ]
    },
    toolbarConfig: {
        tools: {}
    },
    pagerConfig: {
        enabled: true
    },
    proxyConfig: {
        form: true, // 启用表单代理
        autoLoad: false,
        ajax: {
            query: ({ form }) => {
                return new Promise(resolve => {
                    const TableList = [
                        {
                            "id": "360000198312268451",
                            "birth": "2000-12-01",
                            "phone": "18952364784",
                            "name": "王明",
                            "address": "北京市朝阳区群街道办"
                        },
                        {
                            "id": "820000201510033659",
                            "birth": "1987-05-12",
                            "phone": "13254548965",
                            "name": "陈美美",
                            "address": "广东省广州市天河区五山小路1街545"
                        },
                        {
                            "id": "110000198507034480",
                            "birth": "1988-10-06",
                            "phone": "13784525698",
                            "name": "陈美美",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "530000198307057387",
                            "birth": "2000-12-01",
                            "phone": "13254548965",
                            "name": "张晓明",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "820000199611275163",
                            "birth": "2011-07-26",
                            "phone": "18752365489",
                            "name": "陈美美",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "81000019751226373X",
                            "birth": "1987-05-12",
                            "phone": "13784525698",
                            "name": "王明",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "12000020130303977X",
                            "birth": "1988-10-06",
                            "phone": "13784525698",
                            "name": "李晶晶",
                            "address": "广东省广州市天河区五山小路2街101"
                        },
                        {
                            "id": "510000201010286614",
                            "birth": "2011-07-26",
                            "phone": "18952364784",
                            "name": "王明",
                            "address": "广东省广州市天河区五山小路2街101"
                        },
                        {
                            "id": "310000200307208631",
                            "birth": "1987-05-12",
                            "phone": "18952364784",
                            "name": "王明",
                            "address": "广东省广州市天河区五山小路1街545"
                        },
                    ]
                    setTimeout(() => {
                        resolve({
                            result: TableList,
                            page: {
                                total: 40
                            }
                        })
                    }, 500)
                })
            },
        },
    },
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

数据代理+插槽

数据代理+插槽

当表格的表单位置是在工具栏区域时，这时候不需要将表单配置在formConfig中，而是直接使用toolbarConfig.slots.buttons 设置工具栏左侧的插槽，将搜索组件放在这个插槽内。组件需要发出一个事件，用于表格接受表单的参数，接收到参数后可以将该表单用一个响应式对象保存起来，随后调用表格的commitProxy('query')方法手动触发查询。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid">
        <template #buttons>
            <fits-input-search @input-search="InputSearch" @input-change="(val) => inputValue = val">
            </fits-input-search>
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable, FitsInputSearch } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const inputValue = ref('')
const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名', },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    proxyConfig: {
        enabled: true,
        autoLoad: false,
        ajax: {
            query: () => {
                return new Promise(resolve => {
                    const form = { input: inputValue.value }
                    // 文档看不到请求效果，所以用alert来展示
                    alert(`表单参数：${JSON.stringify(form)}`)
                    const TableList = [
                        {
                            "id": "530000198307057387",
                            "birth": "2000-12-01",
                            "phone": "13254548965",
                            "name": "张晓明",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "820000199611275163",
                            "birth": "2011-07-26",
                            "phone": "18752365489",
                            "name": "陈美美",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "81000019751226373X",
                            "birth": "1987-05-12",
                            "phone": "13784525698",
                            "name": "王明",
                            "address": "上海快乐大道11111"
                        },
                        {
                            "id": "12000020130303977X",
                            "birth": "1988-10-06",
                            "phone": "13784525698",
                            "name": "李晶晶",
                            "address": "广东省广州市天河区五山小路2街101"
                        },
                        {
                            "id": "510000201010286614",
                            "birth": "2011-07-26",
                            "phone": "18952364784",
                            "name": "王明",
                            "address": "广东省广州市天河区五山小路2街101"
                        },
                        {
                            "id": "310000200307208631",
                            "birth": "1987-05-12",
                            "phone": "18952364784",
                            "name": "王明",
                            "address": "广东省广州市天河区五山小路1街545"
                        },
                        {
                            "id": "340000197608296947",
                            "birth": "1987-05-12",
                            "phone": "18952364784",
                            "name": "黄白",
                            "address": "北京市朝阳区群街道办"
                        },
                    ]
                    setTimeout(() => {
                        resolve({
                            list: TableList
                        })
                    }, 500)
                })
            },
        },
        props: {
            list: 'list'
        }
    },
    toolbarConfig: {
        slots: {
            buttons: 'buttons'
        },
        tools: {}
    }
}
const xGrid = ref<VxeGridInstance | any>()
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)

/**
 * 点击搜索按钮的回调
 */
function InputSearch() {
    xGrid.value?.fitsTablePro.commitProxy('query')
}

</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

复杂表头

基本使用

复杂表头

通过给 columns 中的对象传递 children 属性定义子列，即可实现表头分组。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const gridOptions: FitsTableProps = {
    border: 'full',
    columns: [
        { type: 'seq', field: "Index", width: 50, title: '序号' },
        {
            title: '基本信息',
            field: "basic",
            children: [
                { field: 'name', title: '姓名' },
                {
                    title: '其他信息',
                    field: "other",
                    children: [
                        { field: 'phone', title: '电话' },
                        { field: 'birth', title: '生日' }
                    ]
                },
                { field: 'sex', title: '性别' }
            ]
        },
        { field: 'mark', title: '备注', sortable: true, showOverflow: true },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', sex: '男', mark: '下周五入住201房' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', sex: '男', mark: '无' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', sex: '女', mark: '已离职，归还设备' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', sex: '女', mark: '此人不存在 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', sex: '男', mark: '办理手续、护照、签证 、身份汇总' },
    ],
    headerAlign: 'center',
}
const xGrid = ref<VxeGridInstance | any>()
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)

</script>

<style lang="scss" scoped>

</style>

<style lang="scss">

</style>```

交叉高亮

交叉高亮

首先交叉高亮需要让表格的行和列分别高亮起来，行的高亮配置可以通过 rowConfig.isHover=true 直接开启，列的高亮没有配置项，需要自己处理，本案例用到表格的 cellMouseenter 事件，因此需要传递 tooltipConfig配置(空对象也行)。然后给每个子列添加headerClassName和className，类名是帮助我们给该列添加高亮的样式。在cellMouseenter方法中开启监听mouseover事件，具体逻辑操作可以看代码。最后需要在卸载页面的生命周期内移除监听事件。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" @cellMouseenter="cellMouseenter" class="complex-highlight-table" />
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

let currentCol = ref(0)

const gridOptions: FitsTableProps = {
    border: 'full',
    columns: [
        { type: 'seq', field: "Index", width: 50, title: '序号', headerClassName: `headerClass${0}`, className: `columnClass${0}` },
        {
            title: '基本信息',
            field: "basic",
            children: [
                { field: 'name', title: '姓名', headerClassName: `headerClass${1}`, className: `columnClass${1}` },
                {
                    title: '其他信息',
                    field: "other",
                    children: [
                        { field: 'phone', title: '电话', headerClassName: `headerClass${2}`, className: `columnClass${2}` },
                        { field: 'birth', title: '生日', headerClassName: `headerClass${3}`, className: `columnClass${3}` }
                    ]
                },
                { field: 'sex', title: '性别', headerClassName: `headerClass${4}`, className: `columnClass${4}` }
            ]
        },
        { field: 'mark', title: '备注', sortable: true, showOverflow: true, headerClassName: `headerClass${5}`, className: `columnClass${5}` },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', sex: '男', mark: '下周五入住201房' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', sex: '男', mark: '无' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', sex: '女', mark: '已离职，归还设备' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', sex: '女', mark: '此人不存在 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', sex: '男', mark: '办理手续、护照、签证 、身份汇总' },
    ],
    headerAlign: 'center',
    rowConfig: {
        isHover: true,
    },
    tooltipConfig: {},
}
const xGrid = ref<VxeGridInstance | any>()
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)

function cellMouseenter({ row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }: any) {
    document.addEventListener('mouseover', onMouseOver, true)
    if ($columnIndex === currentCol.value) return
    // 找到之前高亮的列头，去掉高亮样式
    const preEl = document.querySelector('.iscurrentCol')
    preEl && preEl.classList.remove("iscurrentCol");
    document.querySelectorAll('.iscurrentCol').forEach((elem) => {
        elem.classList.remove('iscurrentCol')
    })
    // 找到现在应该高亮的列，添加样式
    const currentEl = document.querySelector(`.headerClass${$columnIndex}`)
    document.querySelectorAll(`.columnClass${$columnIndex}`).forEach((elem) => {
        elem.classList.add('iscurrentCol')
    })
    currentEl?.classList.add("iscurrentCol");
    currentCol.value = $columnIndex
}

//判断当前是否在弹窗内
const onMouseOver = (e: any) => {
    if (!e?.target?.closest(".vxe-table--body-wrapper")) {
        // 非当前元素，需要执行的代码
        const preEl = document.querySelector('.iscurrentCol')
        preEl && preEl.classList.remove("iscurrentCol");
        document.querySelectorAll('.iscurrentCol').forEach((elem) => {
            elem.classList.remove('iscurrentCol')
        })
        currentCol.value = -1
        document.removeEventListener('mouseenter', onMouseOver, true)
    }
}

onBeforeUnmount(() => {
    document.removeEventListener('mouseenter', onMouseOver, true)
})
onDeactivated(() => {
    document.removeEventListener('mouseenter', onMouseOver, true)
})
</script>

<style lang="scss" scoped>
.complex-highlight-table {
    :deep(.iscurrentCol) {
        background: #f5f7fa;
    }
}
</style>

<style lang="scss">

</style>```

插槽表格

自定义列模板

自定义列模板

通过给 columns 里的对象设置 slots 属性，该属性是一个对象，其中键为default，值为自定义插槽名称。之后在FitsTable组件中通过<template #自定义插槽名称>的形式即可自定义列模板。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid">
        <template #operation_default>
            <el-button size="small" type="primary">
                编辑
            </el-button>
            <el-button size="small" type="danger">
                删除
            </el-button>
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名', },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
        { field: 'operation', title: '操作', slots: { default: 'operation_default' } },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
}
const xGrid = ref<VxeGridInstance | any>()
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

自定义表头

自定义表头

通过给 columns 里的对象设置 slots 属性，该属性是一个对象，其中键为header，值为自定义插槽名称。之后在FitsTable组件中通过<template #自定义插槽名称>的形式即可自定义表头模板。本例还演示了给columns中的对象设置headerClassName表头类名。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid">
        <template #name_header="{ name, row }">
            姓名
            <el-button size="small" type="primary">
                按钮
            </el-button>
        </template>
        <template #birth_header="{ name, row }">
            出生日期
            <span class="vxe-icon-chart-bar-y"></span>
        </template>
        <template #operation_header="{ name, row }">
            <el-input placeholder='自定义' v-model="opeInput" />
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const opeInput = ref('')

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名', slots: { header: 'name_header' } },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期', slots: { header: 'birth_header' }, headerClassName: 'birthHeader' },
        { field: 'address', title: '地址', width: 320 },
        { field: 'operation', title: '操作', slots: { header: 'operation_header' } },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ]
}
const xGrid = ref<VxeGridInstance | any>()
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>
:deep(.birthHeader) span {
    color: red;
}
</style>

<style lang="scss">

</style>```

展开行

展开行

给 columns 里的对象配置 type=expand 开启展开行，并通过给 columns 里的对象设置 slots 属性，该属性是一个对象，其中键为content，值为自定义插槽名称。之后在FitsTable组件中通过 <template #自定义插槽名称> 的形式即可自定义列模板。

<template>
    <fits-table :option="fitsTablePro" class="expandRowTable" ref="xGrid">
        <template #expand="{ slotProps: { row } }">
            <el-descriptions title="User Info">
                <el-descriptions-item label="姓名">{{ row.name }}</el-descriptions-item>
                <el-descriptions-item label="电话">{{ row.phone }}</el-descriptions-item>
                <el-descriptions-item label="出生日期">{{ row.birth }}</el-descriptions-item>
                <el-descriptions-item label="地址">{{ row.address }}</el-descriptions-item>
            </el-descriptions>
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { VxeGridInstance } from 'vxe-table';

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'expand', type: 'expand', slots: { content: 'expand' } },
        { field: 'name', title: '姓名' },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    expandConfig: {

    }
}
const xGrid = ref<VxeGridInstance | any>()
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>
.expandRowTable {
    :deep(.myDescriptions) {
        margin: 20px;
    }
}

.el-descriptions {
    margin: 20px;
}
</style>

<style lang="scss">

</style>```

自定义按钮区域

自定义按钮区域

通过配置 toolbarConfig.slots 属性可以使用插槽。该属性是一个对象，其中键为 buttons，值为自定义插槽名称。之后在FitsTable组件中通过 <template #自定义插槽名称> 的形式即可自定义工具栏左侧的按钮区域。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid">
        <template #buttons>
            <fits-input-search />
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable, FitsInputSearch } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名', },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    toolbarConfig: {
        slots: {
            buttons: 'buttons'
        }
    }
}
const xGrid = ref<VxeGridInstance | any>()
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

主从表

主从表

主从表也是通过展开行来实现的，可以看上面展开行表格的例子，只需要在插槽内再使用一次表格组件就完成了。

<template>
    <fits-table :option="fitsTablePro" class="expandRowTable" ref="xGrid">
        <template #expand>
            <fits-table :option="slaveTablePro" class="slaveTable" ref="slaveGrid" />
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { useFitsTablePro, FitsTableProps } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'expand', type: 'expand', slots: { content: 'expand' } },
        { field: 'name', title: '姓名' },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 300 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    toolbarConfig: {
        tools: {}
    },
    expandConfig: {}
}

const slaveGridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名' },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', },
    ],
}

const xGrid = ref<VxeGridInstance | any>()
const slaveGrid = ref<VxeGridInstance | any>()

const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
const { fitsTablePro: slaveTablePro } = useFitsTablePro(slaveGridOptions, slaveGrid)

</script>
<style lang='scss' scoped>
.expandRowTable {
    :deep(.slaveTable) {
        margin: 0 20px 20px 40px;
    }
}
</style>

<style lang="scss">

</style>```

动态表格

动态表格

动态表格展示了表单＋表格的结合使用。表格内部的渲染器主要是通过表格插槽实现的。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid">
        <template #buttons>
            <el-button @click="getData">
                获取数据
            </el-button>
            <el-button @click="saveData">
                保存
            </el-button>
        </template>
        <template #addDefault>
            <el-button @click="insertItem">
                <i class="vxe-icon-add" />
            </el-button>
        </template>
        <template #requiredHeader="{ slotProps: { column } }">
            <span class="redStar">*</span>
            <span>{{ column.title }}</span>
        </template>

        <template #projectDefault="{ slotProps: { row, column } }">
            <el-form :ref="'requiredFormRef_' + row.rowKey + column.id" :model="row" :rules="rules" :key="row.rowKey">
                <el-form-item prop="project">
                    <el-autocomplete v-model="row.project" placeholder="请输入" :fetch-suggestions="queryProject"
                        clearable />
                </el-form-item>
            </el-form>
        </template>
        <template #batchDefault="{ slotProps: { row, column } }">
            <el-form :ref="'requiredFormRef_' + row.rowKey + column.id" :model="row" :rules="rules" :key="row.rowKey">
                <el-form-item prop="batch">
                    <el-select v-model="row.batch">
                        <el-option v-for="item in batch_Arr" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </template>
        <template #typeDefault="{ slotProps: { row } }">
            <el-form-item>
                <el-select v-model="row.type">
                    <el-option v-for="item in worktype_Arr" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </el-form-item>

        </template>
        <template #taskDefault="{ slotProps: { row, column } }">
            <el-form :ref="'requiredFormRef_' + row.rowKey + column.id" :model="row" :rules="rules" :key="row.rowKey">
                <el-form-item prop="task">
                    <el-input v-model="row.task" />
                </el-form-item>
            </el-form>
        </template>
        <template #responsibleDefault="{ slotProps: { row, column } }">
            <el-form :ref="'requiredFormRef_' + row.rowKey + column.id" :model="row" :rules="rules" :key="row.rowKey">
                <el-form-item prop="responsible">
                    <el-select v-model="row.responsible">
                        <el-option v-for="item in responsible_Arr" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
            </el-form>
        </template>
        <template #reviewerDefault="{ slotProps: { row } }">
            <el-form-item>
                <el-select v-model="row.reviewer">
                    <el-option v-for="item in responsible_Arr" :key="item.value" :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
        </template>
        <template #startdateDefault="{ slotProps: { row, column } }">
            <el-form :ref="'dateFormRef_' + row.rowKey + column.id" :model="row" :rules="rules" :key="row.rowKey">
                <el-form-item prop="startdate">
                    <el-date-picker v-model="row.startdate" value-format="YYYY-MM-DD"
                        @change="dateChange(row, column)" />
                </el-form-item>
            </el-form>
        </template>
        <template #enddateDefault="{ slotProps: { row, column } }">
            <el-form :ref="'dateFormRef_' + row.rowKey + column.id" :model="row" :rules="rules" :key="row.rowKey">
                <el-form-item prop="enddate">
                    <el-date-picker v-model="row.enddate" value-format="YYYY-MM-DD" @change="dateChange(row, column)" />
                </el-form-item>
            </el-form>
        </template>

        <template #deleteDefault="{ slotProps: { row } }">
            <el-button @click="removeItem(row)">
                <i class="vxe-icon-delete" />
            </el-button>
        </template>
    </fits-table>
    <div class="dataBox">
        表格数据：
        {{ tableData }}
    </div>
</template>

<script lang='ts' setup>
import { ElMessage } from 'element-plus'
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const instance = ref()
const tableData = ref([])
const dateObj: any = ref({})
const rowID = ref()
const dateRef = ref()
const gridOptions: FitsTableProps = {
    keepSource: true,
    columns: [
        { field: 'add', title: '操作', width: 80, slots: { default: 'addDefault' } },
        { field: 'project', title: '项目', slots: { default: 'projectDefault', header: 'requiredHeader' } },
        { field: 'batch', title: '批次/迭代', slots: { default: 'batchDefault', header: 'requiredHeader' } },
        { field: 'type', title: '工时类型', slots: { default: 'typeDefault' } },
        { field: 'task', title: '任务内容', slots: { default: 'taskDefault', header: 'requiredHeader' } },
        { field: 'responsible', title: '责任人', slots: { default: 'responsibleDefault', header: 'requiredHeader' } },
        { field: 'reviewer', title: '工时审核人', slots: { default: 'reviewerDefault' } },
        { field: 'startdate', title: '计划开始', slots: { default: 'startdateDefault' } },
        { field: 'enddate', title: '计划完成', slots: { default: 'enddateDefault' } },
        { field: 'delete', title: '操作', width: 80, slots: { default: 'deleteDefault' } },
    ],
    data: [
        { project: '', batch: '', type: '', task: '', responsible: '', reviewer: '', startdate: '', enddate: '' },
        { project: '', batch: '', type: '', task: '', responsible: '', reviewer: '', startdate: '', enddate: '' },
        { project: '', batch: '', type: '', task: '', responsible: '', reviewer: '', startdate: '', enddate: '' },
    ],
    align: 'center',
    toolbarConfig: {
        slots: {
            buttons: 'buttons'
        }
    },
    rowConfig: {
        keyField: 'rowKey',
        useKey: true
    },
    columnConfig: {
        useKey: true
    },
}
const xGrid = ref<VxeGridInstance | any>()
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
// 项目数据源
const project_Arr: any = ref([
    { value: '丰德开发框架项目' },
    { value: '2019年领床路径系统二期产品' },
    { value: '2019年领床路径系统一期产品' },
    { value: '开发组' },
    { value: '2022年特种机电设备检测' },
    { value: '健康档案系统' },
    { value: '2021年资产管理系统' },
    { value: '2023Vue升级' },
])
// 项目的搜索方法
const queryProject = (queryString: string, cb: any) => {
    const results = queryString
        ? project_Arr.value.filter((item: any) => item.value.toLowerCase().indexOf(queryString) !== -1)
        : project_Arr.value
    cb(results)
}
// 批次数据源
const batch_Arr: any = ref([
    { label: '.net core开原框架研究', value: '0' },
    { label: 'Fits Framework', value: '1' },
    { label: 'PC后台管理网站', value: '2' },
    { label: '混合app-ionic5', value: '3' },
    { label: '辅助工具', value: '4' },
    { label: '新PC前端框架研发', value: '5' },
])
// 工时类型数据源
const worktype_Arr: any = ref([
    { label: '项目管理', value: '0' },
    { label: '售前支持', value: '1' },
    { label: '需求分析', value: '2' },
    { label: '系统设计', value: '3' },
    { label: '功能开发', value: '4' },
])
// 责任人数据源
const responsible_Arr: any = ref([
    { label: '李小白', value: '0' },
    { label: '王辉', value: '1' },
    { label: '张冰冰', value: '2' },
    { label: '李萌萌', value: '3' },
    { label: '白静', value: '4' },
])
// 校验规则
const rules = reactive({
    project: [
        { required: true, message: '请选择项目', trigger: 'change' },
    ],
    task: [
        { required: true, message: '请输入任务内容', trigger: 'change' },
    ],
    batch: [
        { required: true, message: '请选择批次', trigger: 'change' },
    ],
    responsible: [
        { required: true, message: '请选择责任人', trigger: 'change' },
    ],
    startdate: [
        { validator: checkDate, type: 'date', trigger: 'change' }
    ],
    enddate: [
        { validator: checkDate, type: 'date', trigger: 'change' }
    ]
})

function insertItem() {
    xGrid.value.fitsTablePro.insertAt({ project: '', batch: '', type: '', task: '', responsible: '', reviewer: '', startdate: '', enddate: '' }, -1)
    tableData.value = xGrid.value.fitsTablePro.getTableData().tableData
}

function removeItem(row: any) {
    xGrid.value.fitsTablePro.remove(row)
    tableData.value = xGrid.value.fitsTablePro.getTableData().tableData
}

function dateChange(row: any, column: any) {
    rowID.value = row.rowKey
    const refName = 'dateFormRef_' + row.rowKey + column.id
    dateRef.value = refName
    if (dateObj.value[row.rowKey] === undefined) {
        dateObj.value[row.rowKey] = {
            [column.field]: row[column.field],
        }
    } else {
        dateObj.value[row.rowKey][column.field] = row[column.field]
    }
    if (dateObj.value[row.rowKey] && dateObj.value[row.rowKey]['startdate'] !== undefined && dateObj.value[row.rowKey]['enddate'] !== undefined) {
        // 点了开始时间，顺便校验结束时间。点了结束时间，顺便校验开始时间
        const arr = refName.split('_')
        const num = column.field === 'startdate' ? Number(arr.slice(-1)) + 1 : Number(arr.slice(-1)) - 1
        const dateName = `dateFormRef_${row.rowKey}col_${num}`
        instance.value.refs[dateName].validate()
    }
}

function checkDate(rule: any, value: any, callback: any, evt: any, e: any) {
    if (!dateObj.value[rowID.value] || !value) {
        callback()
        return
    }
    if (dateObj.value[rowID.value] && dateObj.value[rowID.value]['startdate'] && dateObj.value[rowID.value]['enddate']) {
        if (!moment(dateObj.value[rowID.value]['startdate']).isBefore(dateObj.value[rowID.value]['enddate'])) {
            const msg = rule.field === 'startdate' ? '不得大于结束时间' : '不得小于开始时间'
            callback(new Error(msg))
        } else {
            callback()
        }
    } else {
        callback()
    }
}

function getData() {
    tableData.value = xGrid.value.fitsTablePro.getTableData().tableData
}

function saveData() {
    let requiredFlag = 0
    let requiredRefsNum = 0
    let dateFlag = 0
    let dateRefsNum = 0
    for (let item in instance.value.refs) {
        item.indexOf('requiredFormRef_') !== -1 && instance.value.refs[item] !== null && requiredRefsNum++
        item.indexOf('dateFormRef_') !== -1 && instance.value.refs[item] !== null && dateRefsNum++
    }
    for (let item in instance.value.refs) {
        if (item.indexOf('requiredFormRef_') !== -1 && instance.value.refs[item] !== null) {
            instance.value.refs[item].validate((valid: any, fields: any) => {
                if (valid) {
                    requiredFlag++
                }
            })
        }
        if (item.indexOf('dateFormRef_') !== -1 && instance.value.refs[item] !== null) {
            instance.value.refs[item].validate((valid: any, fields: any) => {
                if (valid) {
                    dateFlag++
                    if (requiredFlag === requiredRefsNum && dateFlag === dateRefsNum) {
                        ElMessage({
                            message: '保存成功',
                            type: 'success'
                        })
                    }
                }
            })
        }
    }
}

onMounted(() => {
    instance.value = getCurrentInstance()
})

</script>
<style lang='scss' scoped>
.dataBox {
    border: 1px solid #fefefe;
    margin-top: 20px;
}

.redStar {
    color: #f84a23;
    margin-right: 3px;
}

.el-form-item {
    margin: 10px auto;
}
</style>

<style lang="scss">

</style>```

拖拽表格

拖拽行

拖拽行

vxe-table 表格不支持拖动功能；可以结合 sortablejs 实现拖动效果。由于直接操作了 Dom 节点，需要与 Vue 的数据同步，必须设置 rowConfig.useKey=true ，并且根据 vue 的规则自行实现数据同步。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" class="DragRowTable">
        <template #dragDefault>
            <span class="drag-btn">
                <i class="vxe-icon-num-list"></i>
            </span>
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import Sortable from 'sortablejs';
import { VxeGridInstance } from 'vxe-table';

const sortable = ref()

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名' },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    rowConfig: {
        useKey: true
    }
}

const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)

onMounted(() => {
    setDrag()
})

function setDrag() {
    const el = document.querySelector(".DragRowTable .body--wrapper>.vxe-table--body tbody")
    sortable.value = Sortable.create(el, {
        onEnd: (evt: any) => {
            if (evt.oldIndex === evt.newIndex) return
            const currRow = gridOptions.data?.splice(evt.oldIndex, 1)[0]
            gridOptions.data?.splice(evt.newIndex, 0, currRow)
        }
    });
}

</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

拖拽列

拖拽列

vxe-table 表格不支持拖动功能；可以结合 sortablejs 实现拖动效果。由于直接操作了 Dom 节点，需要与 Vue 的数据同步，必须设置 columnConfig.useKey=true ，并且根据 vue 的规则自行实现数据同步。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" class="DragColTable">
        <template #dragDefault>
            <span class="drag-btn">
                <i class="vxe-icon-num-list"></i>
            </span>
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import Sortable from 'sortablejs';
import { VxeGridInstance } from 'vxe-table';
import { ElMessage } from 'element-plus';

const sortable = ref()

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    columns: [
        { field: 'name', title: '姓名' },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期', },
        { field: 'address', title: '地址', width: 320 },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    columnConfig: {
        useKey: true
    }
}

const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)

function setDrag() {
    const el = xGrid.value.fitsTablePro.$el.querySelector(".DragColTable .body--wrapper>.vxe-table--header .vxe-header--row")
    sortable.value = Sortable.create(el, {
        onEnd: (sortableEvent: any) => {
            if (sortableEvent.oldIndex === sortableEvent.newIndex) return
            const targetThElem = sortableEvent.item
            const newIndex = sortableEvent.newIndex as number
            const oldIndex = sortableEvent.oldIndex as number
            const { fullColumn, tableColumn } = xGrid.value.fitsTablePro.getTableColumn()
            const wrapperElem = targetThElem.parentNode as HTMLElement
            const newColumn = fullColumn[newIndex]
            if (newColumn.fixed) {
                // 错误的移动
                const oldThElem = wrapperElem.children[oldIndex] as HTMLElement
                if (newIndex > oldIndex) {
                    wrapperElem.insertBefore(targetThElem, oldThElem)
                } else {
                    wrapperElem.insertBefore(targetThElem, oldThElem ? oldThElem.nextElementSibling : oldThElem)
                }
                ElMessage({
                    message: '固定列不允许拖动！',
                    type: 'error'
                })
                // VXETable.modal.message({ content: '固定列不允许拖动！', status: 'error' })
                return
            }
            // 获取列索引 columnIndex > fullColumn
            const oldColumnIndex = xGrid.value.fitsTablePro.getColumnIndex(tableColumn[oldIndex])
            const newColumnIndex = xGrid.value.fitsTablePro.getColumnIndex(tableColumn[newIndex])
            // 移动到目标列
            const currRow = fullColumn.splice(oldColumnIndex, 1)[0]
            fullColumn.splice(newColumnIndex, 0, currRow)
            xGrid.value.fitsTablePro.loadColumn(fullColumn)
        }
    });
}

onMounted(() => {
    setDrag()
})
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

编辑表格

编辑模式切换

编辑模式切换

给 columns 里的对象配置 editRender 属性设置渲染器名称等，即可开启可编辑功能。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid">
        <template #myBtn>
            <el-button @click="changeMode('cell')">
                切换单元格模式
            </el-button>
            <el-button @click="changeMode('row')">
                切换行模式
            </el-button>
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const gridOptions: FitsTableProps = {
    columns: [
        {
            field: 'name', title: '姓名',
            editRender: {
                name: 'input'
            }
        },
        {
            field: 'phone', title: '电话',
            editRender: {
                name: 'input'
            }
        },
        {
            field: 'birth', title: '出生日期',
            editRender: {
                name: 'ElDatePicker'
            }
        },
        {
            field: 'address', title: '地址', width: 320,
            editRender: {
                name: 'input'
            }
        },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    editConfig: {
        trigger: 'click',
        mode: 'cell'
    },
    toolbarConfig: {
        slots: {
            buttons: 'myBtn'
        }
    },
}
const xGrid = ref<VxeGridInstance | any>()
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
function changeMode(m: string) {
    fitsTablePro.editConfig!.mode = m
}

</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

点击触发编辑

点击触发编辑

通过配置 editConfig.trigger 设置编辑器的触发方式。可以通过单击、双击和手动方式触发。本例演示了切换单击和双击的触发方式，手动触发请移步下一个例子。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid">
        <template #myBtn>
            <el-button @click="changeTrigger('click')">
                切换单击触发
            </el-button>
            <el-button @click="changeTrigger('dblclick')">
                切换双击触发
            </el-button>
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const xGrid = ref<VxeGridInstance | any>()

const gridOptions: FitsTableProps = {
    keepSource: true,
    columns: [
        {
            field: 'name', title: '姓名',
            editRender: {
                name: 'input'
            }
        },
        {
            field: 'phone', title: '电话',
            editRender: {
                name: 'input'
            }
        },
        {
            field: 'birth', title: '出生日期',
            editRender: {
                name: 'ElDatePicker'
            }
        },
        {
            field: 'address', title: '地址', width: 320,
            editRender: {
                name: 'input'
            }
        },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401', },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    editConfig: {
        trigger: 'click',
        mode: 'row'
    },
    toolbarConfig: {
        slots: {
            buttons: 'myBtn'
        },
        tools: {
            enabled: false
        }
    },
}
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
function changeTrigger(t: any) {
    fitsTablePro.editConfig!.trigger = t
}
</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>

手动触发编辑

手动触发编辑

手动的触发方式需要配置 editConfig.trigger='manual'，且只对 editConfig.mode='row'有效。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid">
        <template #operation_default="{ slotProps: { row } }">
            <el-button @click="editRow(row)">
                编辑
            </el-button>
        </template>
    </fits-table>
</template>

<script lang='ts' setup>
import { FitsTable } from '@/fits-components';
import { FitsTableProps, useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const gridOptions: FitsTableProps = {
    keepSource: true,
    columns: [
        {
            field: 'name', title: '姓名',
            editRender: {
                name: 'input'
            }
        },
        {
            field: 'phone', title: '电话',
            editRender: {
                name: 'input'
            }
        },
        {
            field: 'birth', title: '出生日期',
            editRender: {
                name: 'ElDatePicker'
            }
        },
        {
            field: 'address', title: '地址', width: 320,
            editRender: {
                name: 'input'
            }
        },
        { field: 'operation', title: '操作', slots: { default: 'operation_default' } },
    ],
    data: [
        { name: '王五', phone: '13224452121', birth: '1999-10-08', address: '广东省广州市天河区五山路东城小区5号楼401', operation: '12' },
        { name: '李晓明', phone: '13754456492', birth: '2015-05-18', address: '广东省广州市天河区五山路东城小区5号楼403' },
        { name: '王大陆', phone: '13324459856', birth: '2000-01-05', address: '广东省广州市天河区五山路东城小区5号楼404 ' },
        { name: '李萌萌', phone: '18712458736', birth: '1879-12-13', address: '广东省广州市海珠区五山路幸福小区6号楼101 ' },
        { name: '张兴', phone: '18924584265', birth: '1954-03-25', address: '广东省广州市海珠区五山路幸福小区7号楼102 ' },
    ],
    editConfig: {
        trigger: 'manual',
        mode: 'row'
    },
    toolbarConfig: {
        tools: {
            enabled: false
        }
    },
}
const xGrid = ref<VxeGridInstance | any>()
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
function editRow(row: any) {
    xGrid.value.fitsTablePro.setEditRow(row)
}

</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>

虚拟滚动

虚拟滚动

默认情况下，如果设置了 height、maxHeight，则会根据触发规则自动启用虚拟渲染（触发规则由 scroll-x.gt | scroll-y.gt 设置）。虚拟滚动启用后只会渲染指定范围内的可视区数据，其他的数据将被卷去收起，当滚动到可视区时才被渲染出来。注意：根据官网配置显示，一旦启用虚拟滚动就无法使用展开行、树结构等特殊功能。

<template>
    <fits-table :option="fitsTablePro" ref="xGrid" />
</template>

<script lang='ts' setup>
import { FitsTableProps, FitsTable } from '@/fits-components';
import { useFitsTablePro } from '@/fits-components/type'
import { VxeGridInstance } from 'vxe-table';

const data: any = reactive([])

const gridOptions: FitsTableProps = {
    height: 500,
    columns: [
        { field: 'name', title: '姓名', },
        { field: 'phone', title: '电话', },
        { field: 'birth', title: '出生日期' },
        { field: 'address', title: '地址', width: 320 },
    ],
    data,
    scrollY: {
        gt: 20
    }
}
const xGrid = ref<VxeGridInstance | any>()
const { fitsTablePro } = useFitsTablePro(gridOptions, xGrid)
onMounted(() => {
    getData()
})

function getData() {
    for (let i = 0; i < 10000; i++) {
        data.push({
            name: '李晓明' + i,
            phone: '18924584265',
            birth: '1954-03-25',
            address: `广东省广州市海珠区五山路幸福小区7号楼${i}房`
        })
    }
}

</script>
<style lang='scss' scoped>

</style>

<style lang="scss">

</style>```

FitsTable 组件属性

属性	说明	类型	必填项	默认值
option	表格全局配置	FitsTableProps	必填	-
gridEvents	表格监听事件	VxeGridListeners	非必填	-

FitsTableProps 表格属性

属性	说明	类型	必填项	默认值
toolbarConfig	工具栏配置	FitsToolsBarConfig | VxeGridPropTypes.ToolbarConfig	非必填	-
formConfig	表单配置	FitsTableProFormConfig | VxeGridPropTypes.FormConfig	非必填	-
columns	列配置	VxeGridPropTypes.Columns	非必填	-
pagerConfig	分页配置	FitsTableProPagerConfig | VxeGridPropTypes.PagerConfig	非必填	-
proxyConfig	数据代理配置	FitsTableProProxyConfig | VxeGridPropTypes.ProxyConfig	非必填	-
storage	数据缓存配置	StorageStrategy	非必填	-
slots	表格插槽	{ empty?: string, form?: string, toolbar?: string, top?: string, bottom?: string, pager?: string }	非必填	-

FitsToolsBarConfig 工具栏属性

属性	说明	类型	必填项	默认值
buttons	左侧按钮组列表	FitsToolsBtnConfig[]	非必填	-
tools	右侧工具列表	FitstoolsOption	非必填	-
slots	工具栏插槽	{ buttons?: string, tools?: string }	非必填	-

FitsToolsBtnConfig 工具栏左侧按钮组属性

属性	说明	类型	必填项	默认值
code	按钮的唯一id编码	string	非必填	-
name	按钮的名字	string	非必填	-
status	按钮的状态	'primary' | 'success' | 'info' | 'warning' | 'danger'	非必填	-
disabled	是否禁用	boolean	非必填	-
onClick	按钮的绑定事件	() => void	非必填	-

FitstoolsOption 工具栏右侧工具配置

属性	说明	类型	必填项	默认值
export	导出	boolean	非必填	true
fullscreen	放大缩小(全屏显示)	boolean	非必填	true
refresh	刷新	boolean	非必填	-
custom	自定义列	boolean	非必填	true
search	是否显示搜索区域	boolean	非必填	-
query	常用查询	boolean	非必填	true
enabled	是否关闭所有功能栏	boolean	非必填	true

FitsTableProFormConfig 表单属性

属性	说明	类型	必填项	默认值
data	表单数据	Object	非必填	-
items	表单项列表	fitsTableFormItemProps[]	非必填	-

fitsTableFormItemProps 表单项配置

属性	说明	类型	必填项	默认值
title	标题	string	非必填	-
field	字段名	string	非必填	-
align	内容对齐方式	'left' | 'center' | 'right' | null	非必填	'center'
titleAlign	标题对齐方式	'left' | 'center' | 'right' | null	非必填	-
titleWidth	标题宽度	string | number	非必填	-
className	类名	string	非必填	'searchBtns'
titlePrefix	前缀配置项	VxeFormItemPropTypes.TitlePrefix	非必填	-
titleSuffix	后缀配置项	VxeFormItemPropTypes.TitleSuffix	非必填	-
titleOverflow	是否省略	boolean	非必填	-
itemRender	表单项渲染配置	FormItemRenderOptions	非必填	-
slots	插槽	VxeFormItemPropTypes.Slots	非必填	-

FitsTableProPagerConfig 分页属性

属性	说明	类型	必填项	默认值
layouts	自定义布局	Array<'PrevJump' | 'PrevPage' | 'Number' | 'JumpNumber' | 'NextPage' | 'NextJump' | 'Sizes' | 'Jump' | 'FullJump' | 'PageCount' | 'Total'>	非必填	['Total', 'Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump']
currentPage	当前页	number	非必填	1
pageSize	每页大小	number	非必填	10
total	总条数	number	非必填	0
pagerCount	显示页码按钮的数量	number	非必填	7
pageSizes	每页大小选项列表	number[] | { label?: number/string, value?: number/string }[]	非必填	[10,15,20,50,100]
align	列对其方式	'right' | 'center' | 'left'	非必填	'right'
background	带背景颜色	boolean	非必填	true
autoHidden	当只有一页时隐藏	boolean	非必填	false

FitsTableProProxyConfig 数据代理属性

属性	说明	类型	必填项	默认值
enabled	开启数据代理模式	boolean	非必填	-
autoLoad	是否自动加载查询数据	boolean	非必填	-
seq	存在 type=index 列时有效，是否代理动态序号（根据分页动态变化）	boolean	非必填	-
sort	是否代理排序	boolean	非必填	-
filter	是否代理筛选	boolean	非必填	-
form	是否代理表单	boolean	非必填	-
ajax	代理配置	{ query?(params: ProxyAjaxQueryParams, ...args: any[]): Promise<ProxyAjaxQueryParams | any> }	非必填	-

StorageStrategy 数据缓存配置

属性	说明	类型	必填项	默认值
enabled	是否开启数据缓存	boolean	非必填	false
dataBase	数据库名字，首字母大写	string	非必填	''
dataSheet	数据表名，首字母大写	string	非必填	'FitsTableComponent'
key	键值对的键值	string	必填	''
store	需要缓存的变量名	any	非必填	-

ProxyAjaxQueryParams 数据代理查询方法配置

属性	说明	类型	必填项	默认值
$grid	获取表格实例的相关信息	boolean	非必填	-
page	获取分页相关信息	boolean	非必填	-
sort	获取服务端排序相关信息	boolean	非必填	-
sorts	获取排序相关信息	boolean	非必填	-
filters	获取服务端过滤相关信息	boolean	非必填	-
form	获取表单相关信息	boolean	非必填	-

更多属性详情请参考 vxe-grid