抱歉,以下是您提供的组件代码的文档:
该组件用于展示数据表格,并提供了一系列功能,包括拖拽、分页、排序、右键菜单等。

<template>
<template>
<Table
ref="tableRef"
v-model:dataSource="dataSource"
id="name"
:columns="columns"
:contextMenu="contextMenu"
:isSort="true"
>
</Table>
</template>
<script setup>
import { ref } from 'vue'
import Table from '@/components/Table/Table.tsx'
const tableRef = ref()
const dataSource = ref([
{
name: '张三',
age: 18,
sex: '男',
},
{
name: '李四',
age: 19,
sex: '男',
},
])
const columns = [
{
title: '序号',
field: 'seq',
type: 'seq',
},
{
title: '姓名',
field: 'name',
},
{
title: '年龄',
field: 'age',
},
{
title: '性别',
field: 'sex',
},
]
const selectedItems = ref([])
const contextMenu = [
{
label: '详情',
fn: (c) => {},
divided: true,
icon: 'o',
},
{
label: '删除',
fn: async (c) => {},
icon: 'close',
},
]
</script>
</template>
以下是接口的文档:
用于描述表格请求参数的数据结构。
字段名 | 类型 | 描述 |
---|---|---|
Sorting | string | 排序字段 |
SkipCount | string | number | 跳过的记录数 |
MaxResultCount | number | 返回的最大记录数 |
其他字段 | any | 其他自定义参数 |
用于描述表格列的数据结构。
字段名 | 类型 | 描述 |
---|---|---|
title | string | 列标题 |
field | string | 列字段名 |
width | string | number | 列宽度 |
sortable | boolean | 是否可排序 |
required | boolean | 是否必填 |
其他字段 | any | 其他自定义参数 |
用于描述表格组件的属性。
字段名 | 类型 | 默认值 | 描述 |
---|
| selections | string[] | - | 预选中项的 id 数组 |
| autoFirstClickRow | boolean | false | 是否自动选中第一行 |
| params | ParamsItem | - | 请求参数 |
| dataSource | any[] | [] | 数据源 |
| columns | ColumnType[] | [] | 列配置项 |
| pageSize | number | - | 每页条数 |
| total | number | - | 总条数 |
| isHidePagination | boolean | false | 是否隐藏分页 |
| isChecked | boolean | - | 是否多选 |
| isSeq | boolean | - | 是否显示序号 |
| isSort | boolean | - | 是否排序 |
| id | string | - | 数据项的唯一标识字段 |
| showDarg | boolean | string | false | 是否出现拖拽 |
| isDrag | boolean | string | - | 是否拖拽 |
| disabledDrag | boolean | - | 是否禁用拖拽 |
| height | string | - | 表格高度 |
| maxHeight | string | - | 表格最大高度 |
| isVScroll | boolean | - | 是否开启虚拟滚动 |
| border | string | any | - | 边框样式 |
| url | string | - | 数据请求地址 |
| sortUrlTpl | string | - | 排序请求地址模板 |
| isFooter | boolean | - | 是否显示底部 |
| gt | number | - | - |
| contextMenu | Object[] | - | 右键菜单项数组 |
| rowConfig | any | - | 行配置项 |
| size | string | - | 表格尺寸 |
| isStop | boolean | - | 是否阻止冒泡 |
| 其他字段 | any | - | 其他自定义参数 |
用于描述右键菜单选项的数据结构。
字段名 | 类型 | 描述 |
---|---|---|
zIndex | number | 层级 |
minWidth | number | 最小宽度 |
x | number | X 轴坐标 |
y | number | Y 轴坐标 |
用于描述右键菜单的状态数据结构。
字段名 | 类型 | 描述 |
---|---|---|
show | boolean | 是否显示右键菜单 |
current | Record<string, any> | null | 当前右键菜单项数据 |
options | any | 菜单选项 |
事件名 | 参数 | 描述 |
---|---|---|
drag | newIndex, oldIndex, row | 拖拽排序事件 |
check | records | 选择事件 |
sort | row | 排序改变事件 |
page | current | 分页改变事件 |
rowClick | tableData | 行点击事件 |
update:dataSource | dataSource | 更新数据源事件 |
| clickFooter | - | 点击底部添加按钮事件 |
| update | exposeMap | 更新暴露方法事件 |
| load | - | 加载完成事件 |
| beforeLoad | - | 加载前事件 |
| reload | - | 重新加载事件 |
| update:total | total | 更新总数事件 |