You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
201 lines
9.6 KiB
201 lines
9.6 KiB
# 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:'重新设置的值'} || 不返回，则使用当前搜索框内的值
|
|
}
|
|
})
|
|
```
|
|
|