使用前准备工作如下:

1 下载依赖包

npm install xiaoxi-pctable -S

2. 在项目入口文件中注入此vue 插件

import PcElTable from 'xiaoxi-pctable' Vue.use(PcElTable)

备注: 注入插件前，必须以及注入好了ajax服务, 例如: Vue.prototype.$post = post ; 否则将post 服务给插件 Vue.use(PcElTable, { '$post': post })

备注2: Vue.use(PcElTable,{name:'pctable'}) //可以通过给name 传值的方式自定义命名 组件名

使用方式

1. 提供自定义的table配置文件: 配置文件如下

export default { restApiUrl: '/order/recoup', // 查询table列表接口地址 headerFixed: true, // 固定表头 selection: false, // 批量选项 keys: [], // 批量处理的键值 actionColFixed: false, // 固定列 border: false, // 是否带线 actionButtons: false, // 操作列 actionButtonsFxied: 'left', // 操作列固定位置 actionColWidth: 350, align: 'center', expandColumn: false, // 扩展项 expandRowKey: 'id' // 扩展项默认唯一属性值 }

2. 提供table 需要展示的字段配置 : 举例

export const defaultCols = [ { label: '补量订单ID', minWidth: 100, key: '_id', type: 'text', //文本类型展示 fixed: true //是否固定列 }, { label: '启动时间', key: 'startTime', type: 'date' //日期类型展示

}, { label: '消费金额', key: 'money', type: 'amount' //金额类型展示

},

{ label: '国家', innerSlot: 'col-cloumns-country' //自定义展示【插槽】

}, ].map(config => { return { ...config } })

3.在.vue 文件中直接使用

   <pctable
    v-loading="loading"
    ref="tableList"
    v-model="queryParams"
    :expand-keys="expandKeys"
    :config="config"
    :callback="handleTableData"
    @changePage="changePage"
  >

   <!-- 自定义插槽展示方式-->
    <template #col-cloumns-country="{ row }">
      具体内容
    </template>
  </pctable>       

pctable 对外暴露的接口有:

input: 监听分页|排序 操作 handle-selection-change: 监听多选项 handle-cell-click: 监听点击当前行