# BaseTablePage-table 页面

column 配置项参考 [el-table](https://element-plus.gitee.io/zh-CN/component/table.html "https://element-plus.gitee.io/zh-CN/component/table.html")

```javascript
const state = reactive({
  baseModelOptions: baseModelOptions, //新增、修改弹窗  动态组件数组
  baseFilterOptions: baseFilterOptions, //上方搜索  动态组件数组
  title: "用户管理", //页面标题,不设置则隐藏标题区域
  getTableFn: getUser, //查询接口 --Promise
  pageInfo: { total: 0, base: { limit: 8, current: 1 } }, //分页信息
});
```

```html
<BaseTablePage ref="table" :tableOptions="state">
<!-- 表格column插槽,不包含操作按钮 -->
  <template #column>
    <el-table-column align="center" prop="username" label="用户名" />
    <el-table-column align="center" prop="gender" label="性别">
      <template #default="scope">
        <span style="margin-left: 10px"
          >{{ scope.row.gender==1?'男':scope.row.gender==2?'女':'未知' }}</span
        >
      </template>
    </el-table-column>
  </template>
  <!-- type1: 编辑按钮前置插槽，可在编辑按钮前添加内容 -->
  <template #before="scope">
    <el-button type="primary">新增</el-button>
  </template>
  <!-- type2: 删除按钮后置插槽，可在删除按钮后添加内容 -->
  <template #after="scope">
    <el-button type="primary">详情</el-button>
  </template>
  <!-- type3: 表格control插槽，重写操作按钮区域 -->
  <template #control="baseScope">
    <el-table-column  label="操作" width="350">
      <template #default="scope">
          <el-button type="warning" @click="baseScope.handleEdit(scope.$index, scope.row)"
            >修改</el-button
          >
          <el-popconfirm @confirm="baseScope.deleteTableData(scope.$index, scope.row)" title="确定删除该条数据?">
            <template #reference>
              <el-button
                type="danger"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
    </el-table-column>
  </template>
</BaseTablePage>
```

## 调用组件方法
```html
<BaseTablePage :tableOptions="state" ref="table"></BaseTablePage>
```
```javascript
const table = ref();
onMounted(() => {
  const {
    doFilter, //点击搜索后执行的函数
    getTableData, //查询表格数据执行的函数
    editTableData, //修改弹窗，点击确定执行的函数
    deleteTableData, //删除弹窗，点击确定执行的函数
  } = table.value;
  //示例：3s后主动执行一次查询
  setTimeout(() => {
    getTableData();
  }, 3000);
});
```
##  事件
| 名称              |            描述             |  参数 |
| ----------------- | :-------------------------: |   -----: |
| import | 点击顶部导入按钮触发 |  null |
| export | 点击顶部导出按钮触发 |  null |
| doSelection| 行选中change事件 |  \{data:Array,ids:Array\} |

## tableOptions 属性
### function相关
| 名称              |            描述             | 必填 | 参数类型 | 默认值 |
| ----------------- | :-------------------------: | ---: | -------: | -----: |
| handleAdd | 添加按钮执行的 func(覆盖默认的调用 function) | 否 | Function | null |
| handleAdd | 添加按钮执行的 func(覆盖默认的调用 function) | 否 | Function | null |
| handleEdit | 点击编辑按钮执行的 func(覆盖默认的调用 function) | 否 | Function(index,row) | null |
| handleDelete | 点击删除按钮执行的 func(覆盖默认的调用 function) | 否 | Function(index,row) | null |
| beforeSubmit | 提交修改前事件，F(params) | 是 | Function | null |
| beforeShowEdit | 点击编辑按钮事件,弹窗显示前执行(同步) F(params) | 否 | Function | null |
| beforeEdit | 与 beforeShowEdit 执行时机一致(异步) | 否 | (Promise)Function(row) | null |
| beforeDelete | 执行删除前调用 | 否 | Function(row) | null |
| [beforeFilter](./page.md#示例1) | 执行搜索前调用 | 否 | Function(params) | null |
| [beforeReset](./page.md#示例1) | 执行重置前调用 | 否 | Function(params) | null |
| afterSubmit | 表单提交后调用(支持普通 fn 与 return Promise) | 否 | (Promise)Function(row) | null |
| afterDelete | 数据删除后调用(支持普通 fn 与 return Promise) | 否 | (Promise)Function(row) | null |
### 按钮相关
| 名称              |            描述             | 必填 | 参数类型 | 默认值 |
| ----------------- | :-------------------------: | ---: | -------: | -----: |
| showAddBtn | 是否显示添加按钮 | 否 | Boolean | true |
| showEditBtn | 是否显示顶部修改按钮 | 否 | Boolean | false |
| showDeleteBtn | 是否显示顶部删除按钮 | 否 | Boolean | false |
| showImport | 是否显示顶部导入按钮 | 否 | Boolean | false |
| showExport | 是否显示顶部导出按钮 | 否 | Boolean | false |
| editBtnName | 修改操作 按钮名称 | 否 | String | null |
| delBtnName | 删除操作 按钮名称 | 否 | String | null |
| rowControl |  行内操作按钮控制\{showEditBtn:false,showDelBtn:false\} | 否 | Object | \{showEditBtn:true,showDelBtn:true\} |
| permission |  页面内增删改查权限，permission:\{add:'菜单权限标识',edit:'菜单权限标识',delete:'菜单权限标识'\} | 否 | Object | null |

### 配置属性
| 名称              |            描述             | 必填 | 参数类型 | 默认值 |
| ----------------- | :-------------------------: | ---: | -------: | -----: |
| baseModelOptions  | 新增、修改弹窗 动态组件数组 |   是 |    Array |   null |
| baseFilterOptions |    上方搜索 动态组件数组    |   是 |    Array |   null |
| pageSelection |    是否开启分页行选中(不开启只计算当前page选中)   |   否 |    Boolean |   false |
| loadingText |    加载中的文本    |   否 |    String |   Loading... |
| loadingBackground |    加载中背景色    |   否 |    String |   rgb(34, 58, 106, 0.5) |
| style |    BaseTablePage组件的样式    |   否 |    StyleObject |   null |
| tableStyle |    el-table组件的style    |   否 |    StyleObject |   null |
| autoQuery | 是否页面初始化自动进行查询 table | 是 | Boolean | true |
| showLoading | 是否显示加载动画，默认 false，且只有值为 true 显示 | 否 | Boolan | true |
| rowKey | 当 row 中包含 children 字段时，被视为树形数据，指定 row-key,开启树形数据展示 | 否 | String | null |
| baseModelName | 弹窗标题 | 否 | String | null |
| hideControl | 隐藏操作列 | 否 | Boolean | null |
| primaryKey | 修改操作 参数名称 | 否 | String | null |
| deleteKey |  删除操作 参数名称 | 否 | String | null |
| baseQuery | 查询接口默认参数 | 否 | Object | null |
| baseAdd | 添加接口默认参数 | 否 | Object | null |
| baseUpdate | 修改接口默认参数 | 否 | Object | null |
| getTableFn | 查询接口 | 是 | (Promise) Function | null |
| addFn | 新增接口 | 否 | (Promise) Function | null |
| editFn | 修改接口 | 否 | (Promise) Function | null |
| detailFn | 查询详情接口,点击修改触发，为 null 时，使用 table-row 的数据 | 否 | (Promise) Function | null |
| deleteFn | 删除接口 | 否 | (Promise) Function | null |
| pageInfo | 分页信息 | 否 | Object | { total: 0, base:{limit: 10,current: 1} } |
| pageKeys | 查询时分页key | 否 | Object | \{ limit: 'limit',page: 'current' \} |


## 插槽

| 名称      |          描述          |                              scope |
| --------- | :--------------------: | ---------------------------------: |
| addButton | 顶部添加按钮的内部插槽 |                               none |
| column    |   table-column 内容    |                                    |
| control   |     操作(操作按钮)     | scope.'table 相关 [methods](./page.md#control插槽属性)' |
| before   |     编辑按钮前置插槽     | scope.row |
| after   |     删除按钮后置插槽     | scope.row |

## control插槽属性
 | 名称      |          描述          |
| --------- | :--------------------: |
| showModel | 显示添加/编辑弹窗 |        
| doFilter    |   触发查询按钮    |     
| getTableData   |     查询列表     | 
| pageChange   |     触发页面改变     | 
| tableData   |     当前tableData     | 
| handleAdd   |     触发新增按钮点击     | 
| handleEdit   |     触发修改按钮点击     | 
| editTableData   |     触发提交修改事件     | 
| deleteTableData   |     触发删除点击事件     | 



## 其他配置
### 数值来源：
vue全局变量$autoScrollTop|$autoScrollHeight
| 名称      |          描述          |          defasult          |
| --------- | :--------------------: | :--------------------: |
| $autoScrollTop | 页码变化时是否滚动到顶部 | false |        
| $autoScrollHeight    |   table高度,autoScrollTop为true生效    |  '' |  

## 示例1
```javascript
const state = reactive({
  beforeReset: ()=>{
    //1. 使用异步的方式
    return new Promise((resolve)=>{
      setTimeout(()=>{
        //dosomething...
        resolve()
      },2000)
    })
    //2.使用同步的方式
    //dosomething...
  },
  beforeFilter: (params)=>{
    //1. 使用异步的方式
    return new Promise((resolve)=>{
      setTimeout(()=>{
        //dosomething...
        resolve({a:'重新设置的值'})
      },2000)
    })
    //2.使用同步的方式
    //dosomething...
    // return {a:'重新设置的值'} || 不返回，则使用当前搜索框内的值
  }
})
```