Commit 33c9f11f by linjinhong

添加vxetable文档

parent de6d963d
**Table 属性 (Props)**
| 参数 | 说明 | 类型 | 默认值 |
| :-------------: | :------------: | :-----------: | :----: |
| config | 表格列配置 | TableColumn[] | [] |
| tableEditConfig | 表格编辑配置 | Object | {} |
| modelValue | 表格数据 | Object[] | [] |
| getTablelist | 数据加载方法 | Function | null |
| isShowCheckBox | 是否显示复选框 | Boolean | true |
**TableColumn 结构**
| 参数 | 说明 | 类型 |
| :----: | :------------: | :-------------------------------------------------------------------------------------------------------: |
| prop | 列字段名 | string |
| label | 列标题 | string |
| attrs | 额外属性 | ColumnAttrs |
| render | 自定义渲染函数 | RenderFunctions(默认使用 default,如要开启单元格编辑 edit 需在 Table 中传入 tableEditConfig.enabled=true) |
_ColumnAttrs_
```ts
interface ColumnAttrs {
width?: string | number
[key: string]: unknown
}
```
_RenderFunctions_
```ts
interface RenderFunctions {
// 默认单元格渲染
default?: (params: { row: TableRowData }) => VNode | VNode[] | JSX.Element
// 编辑状态渲染
edit?: (params: { row: TableRowData }) => VNode | VNode[] | JSX.Element
// 其他自定义渲染
[key: string]:
| ((params: { row: TableRowData }) => VNode | VNode[] | JSX.Element)
| undefined
}
```
_示例_
```tsx
const columns = [
{
prop: 'name',
label: '姓名',
attrs: { width: 180, fixed: 'left' },
},
{
prop: 'status',
label: '状态',
render: {
default: ({ row }) => (
<Tag color={row.status === 1 ? 'success' : 'error'}>
{row.status === 1 ? '正常' : '禁用'}
</Tag>
),
edit: ({ row }) => (
<Select v-model={row.status}>
<Option value={1}>正常</Option>
<Option value={0}>禁用</Option>
</Select>
),
},
},
]
```
**事件 (Events)**
| 事件名 | 说明 | 回调参数 |
| :----------------: | :------------: | :--------------------------: |
| update:modelValue | 表格数据变化 | 表格数据数组 |
| checkbox-change | 复选框选择变化 | 当前选中行数据 |
| getCheckboxRecords | 获取选中行数据 | 当前选中行数据(含全选状态) |
**可用方法**
| 方法名 | 说明 | 参数 |
| :------------: | :------------: | :------: |
| getSelectEvent | 获取选中行数据 | 无 |
| selectRowEvent | 设置高亮行 | row: any |
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment