小通行-基于antdv封装的特殊复杂表格，带通行描述信息、可展示通行的单元格信息、可跨页选择数据功能、分页功能、可编辑单元格功能

# SelfTable表格组件使用文档 组件目录：src/views/components/SelfTable.vue ## 使用方法 ## 参数 | 字段 | 类型 | 描述 | |----------|---------|-------------------------------------------| | api | Promise | 表格数据api | | dataSource | array | 表格数据 | | columns | array | 表格column数据,列数据一定要指定width | | has-checkbox | boolean | 是否可选，默认false | | full-row-type | string | 通行类型 'prev' 前一行，'last' 后一行 ，FullRowType类型 | | tableProps | Object | 传给antd table组件的数据 | ### 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); ``` - tableSourceData：获取接口返回的数据 ## 插槽 - `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()