smart-factory/web/docs/components/module/page.md

BaseTablePage-table 页面

column 配置项参考 el-table

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

<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>

调用组件方法

<BaseTablePage :tableOptions="state" ref="table"></BaseTablePage>

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	执行搜索前调用	否	Function(params)	null
beforeReset	执行重置前调用	否	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'
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

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:'重新设置的值'} || 不返回，则使用当前搜索框内的值
  }
})