组件文档

1.FormItem

引用方式

import FormItem from "@/components/FormItem";

参数列表

支持渲染的标签

• Input
• InputNumber
• Select
• DatePicker (date,month,daterange)
• Switch

代码示例见FilterForm

2.FilterForm 过滤表单

引用方式

import FilterForm from "@/components/FilterForm";

参数列表

方法

代码示例见FilterTablePagination

3.BasicTable 基于el-table对表格组件进行二次封装

参数列表

方法

注意

1.如果需要对表格单元格内容进行格式化时需要给el-table-column添加formatter方法，此方法不能直接封装在slot插槽中。所以在封装中设置了2个列，根据column配置中是否传入custom字段进行区分。如果custom为true则使用自定义列，比如可以设置可编辑的单元格之类的。如果不传custom则使用普通列，列上配置formatter属性。代码如下：

  <el-table :data="tableData" ref="basicTableRef" style="width: 100%" border @selection-change="handleSelectionChange" v-loading="loading" :header-cell-class-name="getHeaderCellClassName || ''">
    <template v-for="(item,index) in columns">
      <el-table-column v-if="['index','selection'].includes(item.type)" :type="item.type" :key="index" :label="item.label" :align="item.align || 'center'" v-bind="item.attrs || {}" width="55" :selectable="item.selectable">
      </el-table-column>
      <!-- 自定义列模板 columns数组中item需要定义custom字段 -->
      <el-table-column v-else-if="item.custom" :width="item.width" v-bind="item.attrs || {}" :key="item.prop+'custom'" :show-overflow-tooltip='item.showOverflowTooltip || false'>
        <template slot="header" slot-scope="{$index,column}">
          <slot :name='item.prop +"_header"' :$index='$index' :column="column" :label="item.label">{{item.label}}</slot>
        </template>
        <template slot-scope="{$index,row,column}">
          <slot :name="item.prop" :$index='$index' :row="row" :column="{...column,...item}">
            {{row[item.prop]}}
          </slot>
        </template>
      </el-table-column>

      <el-table-column v-else :prop="item.prop" :label="item.label" :formatter="item.formatter" :width="item.width" v-bind="item.attrs || {}" :key="item.prop">
        <template slot="header" slot-scope="{$index,row,column}">
          <slot :name='item.prop +"_header"' :$index='$index' :column="column" :label="item.label">{{item.label}}</slot>
        </template>
      </el-table-column>
    </template>
  </el-table>

类似这样的column项会报错

     {
          prop: 'status',
          label: '项目估值状态',
          attrs: {'min-width': 96},
          formatter: (row, column, cellValue, index) => {
            return this.$createElement('el-tag', {
              props: {
                type: this.calculateByValueStatus(cellValue).statusType,
                hit: true
              }
            }, this.calculateByValueStatus(cellValue).statusText)
          }
        },

代码示例见FilterTablePagination

4.Pagination 基于el-pagination 对分页组件进行二次封装

像其他的一些配置比如pageSizes,layout属性维护在组件的data中，方便统一维护

方法

注意：由于FilterTablePagination中使用该组件的方式是.sync。所以已经实现了双向绑定

   <Pagination :currentPage.sync='paginationProps.currentPage' :pageSize.sync='paginationProps.pageSize' :total='paginationProps.total'/>

至此，一个页面的三个部分：过滤条件查询，表格展示，分页就已经完成封装了，分别对应FilterForm，BasicTable，Pagination。

这里我们还进行了一个组合式的封装，可以针对大部分普通的表格展示页面，如果有一些复杂的表格，比如表格单元格可编辑，表格行可编辑，这里还没有封装，可以后期根据业务需求扩展。

4.FilterTablePagination

基于FilterForm，BasicTable，Pagination三个组件组合合成的。

参数列表

Events (传递给子组件的方法)

使用方式

见页面 filterTablePaginationPage
业务中需要关注的地方
1.传入表单，表格，分页需要的相关配置项

2.传入请求列表的参数

3.传入请求列表的方法loadData

4.如果表格有操作项，比如新增，编辑，删除，导出等操作，

所以上面业务中一些通用的数据和方法可以封装在一个mixin中进行逻辑复用。见QueryTablePaginationMixin.js中