业务场景

在代码标准换行的状况下，使用100行之内代码实现下图白色区域除新建和编辑外的全部功能。javascript

这种页面在管理系统里多的很，排除掉新建和编辑，那么大体功能以下：html

搜索
重置
删除
批量删除
导入
导出
分页
切换页容量
按指定列排序

开始设计

一如既往，做为8年前端的我，喜欢先想好如何使用。我指望，我能够像下面这样来完成这样一套页面。前端

<template>
  <!-- 搜索条件表单（略） -->
  <!-- 操做按钮 -->
  <el-button @click="search">搜索</el-button>
  <el-button @click="importExcel">导入</el-button>
  <el-button @click="exportExcel">导出</el-button>
  <el-button @click="reset">重置</el-button>
  <el-button @click="deleteBatch">批量删除</el-button>
  
  <!-- 表格 -->
  <el-table>
    <el-table-column label="操做" min-width="120" >
      <template slot-scope="{row}">
        <el-button @click="deleteById(row)>删除</el-button> </template> </el-table-column> </el-table> <!-- 分页 --> <pagination @size-change="handleSizeChange" @current-change="handlePageChange" :pagination="tableData.pagination" ></pagination>
</template>

<script> export default { name: 'MyPage', extends: BaseTable, // 继承BaseTable，获取功能默认实现方法 data () { return { form: { 表单搜索条件字段定义 } } }, created () { this.config({ module: '权限', // 模块名称 api: '/system/permission', // 接口文件 sorts: [{ // 默认排序字段配置 property: 'perm.CREATE_TIME', direction: 'DESC' }] }) this.search() } } </script>

复制代码

整个页面经过这样的结构呢，就能够完成上述9个繁琐的功能。那么会存在如下几个问题。vue

1. 默认的功能实现不知足当前页面的需求怎么处理？

覆盖！例如删除，咱们从BaseTable下继承下来的方法为deleteById，那么咱们在methods中编写deleteById方法便可，以下java

methods: {
  deleteById(row) {
    // 自定义实现
  }
}
复制代码

这样呢，继承下来的方法被覆盖，调用的是本页面的deleteById方法，同理，若是当前页面有更多功能，新增方法便可。git

2. 页面中只包含了部分功能如何处理？

不用处理！虽然继承了9个默认实现，不去使用即可。github

WHY？

为何这么设计？咱们能够试想一下，若是每一个页面都独立去写这些功能是多么冗余的工做量。而且，每一个开发的实现逻辑是有差别的，默认实现知足大部分的实现逻辑就意味着咱们能够统一维护，而且也不会丢失独特的业务处理。api

代码实现

代码的具体实现得根据项目的设计特色来决定。我在个人开源框架Eva中有一套默认的实现。在src/components/base/BaseTable.vue中。因为代码实现超过了200行，因此这里就不贴出来了，只是实现功能而已，但设计思路已经讲述完毕了。markdown

Eva开源框架GITEE：gitee.com/coderd-repo…
Eva开源框架GITHUB：github.com/coderd-repo…

欢迎star！框架