业务场景

在代码标准换行的情况下，使用100行以内代码实现下图白色区域除新建和编辑外的所有功能。

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

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

开始设计

一如既往，作为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个繁琐的功能。那么会存在以下几个问题。

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

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

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

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

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

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

WHY？

为什么这么设计？我们可以试想一下，如果每个页面都独立去写这些功能是多么冗余的工作量。并且，每个开发的实现逻辑是有差异的，默认实现满足大部分的实现逻辑就意味着我们可以统一维护，并且也不会丢失独特的业务处理。

代码实现

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

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

欢迎star！

关注我，和你一起探讨代码设计的艺术。