Z-custom-table NPM

表格实例- 参考配置

<template>
 <div>
   <z-customtable  v-bind="tableSetAttr">
     <template v-for="item in tableSetAttr.tableAttr.columns">
       <el-table-column
         :fixed="item.fixed"
         :prop="item.dataKey"
         :sortable="item.sortable"
         :label="item.title"
         :width="item.width"
       />
     </template>
   </z-customtable>
 </div>
</template>


<style lang="scss"></style>

表格实例- 启动虚拟表格/滚动条跟随

<template>
 <div>

   <z-customtable ref="dom" class="custom" :tableData="data" :requestLoading="requestLoading" v-bind="tableSetAttr">
     <template v-for="item in tableSetAttr.tableAttr.columns">
       <el-table-column
         v-if="!['action'].includes(item.dataKey)"
         :fixed="item.fixed"
         :prop="item.dataKey"
         :sortable="item.sortable"
         :label="item.title"
         :width="item.width"
       ></el-table-column>
     </template>
     <!-- <el-table-column prop="name" label="Name" width="120" />
     <el-table-column prop="state" label="State" width="120" />
     <el-table-column prop="city" label="City" width="120" />
     <el-table-column prop="address" label="Address" width="600" />
     <el-table-column prop="zip" label="Zip" width="120" />
     <el-table-column fixed="right" label="action" width="120">
       <template #default >
         <el-button link type="primary" size="small" >Detail</el-button>
         <el-button link type="primary" size="small">Edit</el-button>
       </template>
     </el-table-column> -->
     <el-table-column prop="action" label="action" width="120">
       <template #default>
         <el-button link type="primary" size="small">Detail</el-button>
         <el-button link type="primary" size="small">Edit</el-button>
       </template>
     </el-table-column>
   </z-customtable>
 </div>
</template>


<style lang="scss">
.custom {
}
</style>

表格属性

属性	描述	备注
tableData	表格数据	Array
requestLoading	加载	boolean
onRequest	操作请求 promise	(paginationOption) => Promise
showPage	显示分页	boolean
virtualized	开启虚拟化表格	boolean
stickyed	横向滚动条随屏	boolean
tableEvent	表格事件	同element-plus
tableAttr	表格配置	同element-plus , virtualized: true时宽度受tableAttr.width限制参考实例
paginationOption	分页配置	同element-plus
paginationEvent	分页事件配置	同element-plus