ztx-component

基于elementUi进行的组件封装

引入组件

import ztxComponent from 'ztx-component'
Vue.use(ztxComponent,{
  defaultListFields: ["list", "data", "records"]              # 默认列表所在字段
  defaultTotalFields: ["total", "totalCount", "totalRows", "count", "size"] #默认总量所在字段
  defaultPageIndexField: 'pageNo',                            #接口向后端传输的分页字段当前页名称，默认是“pageNo”
  defaultPageSizeField: 'limit',                              #接口向后端传输的分页字段页数据名称，默认是“limit”
  defaultPageLimit: 10,                                       #默认分页组件的每页数据条数
  defaultPageLayout: 'total, prev, pager, next, jumper'       #默认分页组件的layout
  defaultPageSizes: [10, 15, 20, 30, 40]                      #默认分页组件的pagesizes
})

ztx-table支持的接口属性

#ztx-table 支持的接口属性
# 属性名称         类型     是否必需     默认值                  说明
  tableColumns    Array       是        []                     #列表元素 
                                                               #示例 [ { prop: 'name', label: '姓名', width: 100, slotName: 'nameName' }]
  flexFull        Boolean               false                  #在父容器时flex布局时，设置为true的话，自动充满剩余空间
  hasSelection    Boolean               false                  #是否支持多选
  hasIndex        Boolean               false                  #是否有序号列
  emptyShowText   String                '--'                   #在列值为空的时候显示的字符
  escapeDictionary Object               {}                     #转译对象字典 例如： {status:[{label:'正常',value:1}]} 
                                                               #             或者  {status:{'1':'正常'}}

#tableQuery  mixin
  data属性                                                     #data配置，均可在mixin混入调用页修改
    table: Object  字段内容如下                                            #table字段配置
      addEmptyCol: true,
      tableLoading: false,
      tableColumns: [],
      tableData: []
    
    page: Object   字段内容如下                                 #分页属性配置page配置                       
      limit: 10,                                               #全局可配置config.prototype.defaultPageLimit
      page: 1,
      total: 0,
      layout: 'total, prev, pager, next, jumper',              #全局可配置config.prototype.defaultPageLayout 
      pageSizes: [10, 20, 30, 50, 100]                         #全局可配置config.prototype.defaultPageSizes
    dictionaryObject   Object                                  #同ztx-table的escapeDictionary属性
    
    debugMode       Boolean              false                 #debug模式，可查看更多的查找信息
    pageIndexField  String               'pageNo'              #接口向后端传输的分页字段当前页名称，默认是“pageNo”,可全局配置defaultPageIndexField
    pageSizeField   String               'limit'               #接口向后端传输的分页字段页数据名称，默认是“limit”，可全局配置defaultPageSizeField

  queryTableData  Function                                     #调用入口函数，参数(params, queryMethod, callBack=null)
  resultProcessing Function            null                    #数据预处理
  processingFlag  String                'default'              #预处理标识，在需要预处理不同的结果时调用
  apiListField    String                ''                     #后端数据返回列表所在字段 如果在defaultListFields中，则不需要设置
                                                               #如果总是获取数据不正确，请设置该值。可以简单设置，也可以层次设置，例如 data.list
  apiTotalField   String                ''                     #后端数据返回列表所在字段  如果在defaultTotalFields中，则不需要传
                                                               #如果总是获取数据不正确，请设置该值。可以简单设置，也可以层次设置，例如 data.total


  resultProcessing Function                                    #接口返回结果预处理，要求返回结果是对象，符合默认处理格式，包含列表和分页数据

                                                              #例如：(processingFlag,result) =>{
                                                              #         const {code,data,total} = result;
                                                              #         const newData = ...//对data进行处理，生成一个新的data
                                                              #         return {code,data:newData,total};
                                                              #       }
  

For a detailed explanation on how things work, check out the guide and docs for vue-loader.