# SelfTable表格组件使用文档
组件目录:src/views/components/SelfTable.vue
## 使用方法
参考 planManage 目录
## 参数
| 字段 | 类型 | 描述 |
|----------|---------|-------------------------------------------|
| api | Promise | 表格数据api |
| dataSource | array | 表格数据 |
| columns | array | 表格column数据,列数据一定要指定width |
| has-checkbox | boolean | 是否可选,默认false |
| full-row-type | string | 通行类型 'prev' 前一行,'last' 后一行 ,FullRowType类型 |
| tableProps | Object | 传给antd table组件的数据 |
| allTableColumnsNum | number | 所有的列数量,用于合并通行使用 |
### columns类型
SelfTableColumnType类型
在antd表格columns基础上增加了
- slot?: string; 插槽
- fullFirst?: boolean; 如果是通行传true则展示full-row插槽,如果不是通行并且传入了插槽则展示传入的插槽
- isEdit?: boolean; 是否是编辑列,头部显示编辑图标
- ifShow?: () => boolean;显示隐藏列,默认true
注意:
firstSharedOnCell方法是第一列的配置
```js
/**
* 首位列
* @param type 通行位置 prev | last
* @param columnsNum 要合并的行数,也就是总列数,包括操作,不含序号和选择
* @param index 索引
*/
export const firstSharedOnCell = (type: FullRowType, columnsNum: number, index) => ({
colSpan: index % 2 === useFullRowIndex(type).fullRowIndex ? columnsNum : 1,
});
```
## 方法
- search(params, reset) :搜索方法,用于表单按钮搜索
- params为Object,用于接口发送请求传参
- reset:是否重置页码为1,再加载数据
- getChecked():获取当前页面选中数据
- getTableData():获取表格实时数据
- setTableData():设置表格某行的某个单元格数据
- sourceData:获取接口返回的数据
- tableSourceData:获取接口返回的表格数据
```js
const myTableRef = ref(null);
myTableRef.value.search({ name: 'xxx', age: 20 }); // 传入搜索字段
const check = myTableRef.value.getChecked(); // 选中数据
console.log('check', check);
```
## 插槽
- `form`: 搜索表单区域
- `tableHead`: 表格和form中,放按钮
- `tableTitle`: 表头上面,放合计数据
- `action`:操作区
## 可编辑单元格
表格内使用插槽
```html
<template #inputSlot="scope">
<div class="slot-cont">
<a-input @change="(e) => selfTableRef.setTableData(scope.rowIndex, 'username', e.target.value)" />
</div>
</template>
```
columns中定义插槽
```json
{
title: '重量',
dataIndex: 'inputValue',
width: 100,
customCell: (_, index) => sharedOnCell(index, fullRowType),
slot: 'inputSlot',
isEdit: true,
}
```
获取表格数据
selfTableRef.value.getTableData()