vue3 + ts 开发系统 -- table分页/一些小坑

table组件分页封装

• 希望以表格方式展示列表数据，但数据量较大，应使用分页加载

• Table组件和Pagination组件可以很方便实现这点，因有多组数据需要通过该方式加载，将其封装为TablePagination组件。

• 最初table以插槽形式注入，因为对于不同数据集来说，表格列必然不同，这与数据集，以及页面期望展示的数据相关，所以不采用table放在TablePagination中，props传入属性的形式。

• 后续发现Table数据是以props.data的方式传入，为了方便控制分页，将Table组件写在TablePagination中，table-column则使用slot注入。

• 基础代码如下

  <script setup lang="ts">
  import { computed, ref } from "vue-demi";
  
  const props = defineProps<{
      data?: Array<any>
  }>()
  
  const current = ref(1);
  const pageSize = 5;
  const dataSize = props.data?.length ?? 0;
  
  const showData = computed(() => props.data?.slice((current.value - 1) * pageSize, current.value * pageSize))
  
  </script>
  
  <template>
      <div v-if="props.data && props.data.length > 0">
          <el-table :data="showData" stripe highlight-current-row style="width: 100%">
              <slot name="tableColumns"></slot>
          </el-table>
          <el-pagination
              v-model:currentPage="current"
              layout="prev, pager, next"
              :total="dataSize"
              :page-size="pageSize"
              hide-on-single-page
          ></el-pagination>
      </div>
  
      <el-empty v-else description="desc" />
  </template>
  

零碎小坑和一些思考

• 使用??进行判断时，空字符串''会判定为true。事实上可选链中??仅仅在被判断对象为null和undefined时选择后者，和||还有区别。
  

• message,upload等组件的抽离与再包装

  • 一般出于美观性考虑，一套系统中使用的消息提示、上传、头像显示等等是一致的。即使是使用了el-ui，也最好包装下component，最大程度复用代码，否则即使只是引入Message，每个文件中都要import一次并写相同的ElMessage()和类似的属性也是个麻烦，抽成功能函数直接调用showMessage(text)更加简洁。
  • 再举个例子，用户信息表，有注册，有修改，将Form.vue将表单抽离出来可以较大程度的复用该表单，毕竟注册和修改的字段与表单样式基本一致，将data以props传入，注入到Form的model中，可以实现复用。其次，关于提交按钮，提交的操作流程为 表单检查 ，检查无误后执行post，检查post结果并根据返回code值展示提示信息 三步，至于执行请求后的操作、提示信息后的回调、提示信息文案则各有不同，可以将这部分抽成逻辑函数，表单提交执行summit时直接调用helper中的submit函数就好。

• 逻辑函数统统抽离，拆分组件

  • .vue文件将样式逻辑和结构放在一处，整个文件比较臃肿，less尚且可以忽略，毕竟样式写完，都是对照着结构看，但结构与ts加起来超过200行，我认为就需要进行拆分了，拆分从两方面入手，如果是template过多，则拆出组件，放到/page/view下的/comp中；如果是逻辑过多，则抽离功能函数，抽离对象配置，放到新的ts文件中。
  • 如使用了el-tabs，则每个el-tab-pane中的面板都应该抽离成组件，查看便利，也有效隔离了不同pane中的数据与逻辑。再比如表单el-form可以使用rules属性进行表单校验，这个校验对象rules显然写在同一个vue文件中实在臃肿，可以将其放在formRules.ts中引入rules对象
    • 要注意的是，自定义校验规则时有时候需要用到另一个字段的值，如密码验证，需要获取首次输入的密码，我采取了在formRules.ts文件中定义getRules(params)的方法，将所有可能需要的值通过params注入，并让函数返回rules

• 考虑页面布局，某个组件在页面中有两个实例

  • 考虑如下一种页面，页面中有ABC三个part，内部均为card的竖直排列。
  • 在较大宽度下，页面为左右布局，AC在左，竖直排列，B在右
  • 在较小宽度下，页面单列布局，以ABC的顺序竖直排列
  • template中针对B，抽离成为一个组件，在本页面引入两次，在不同的页面宽度下，设置其display属性。这是本页面采取的方案，在class的命名上使用smallScreen/largeScreen的区分以便理解。

• vue-router 4，希望访问不存在页面路径时，导航到404页面，使用path:'*'报错

  • 需要改成正则path: '/:pathMatch(.*)*'，详细直接参考官方文档。