表格组件WTable.vue
<template> <div class="wTable"> <!--头部工具栏 --> <div v-if="tools && tools.length>0 && tools[0].label"class="toolBar"> <template v-for="(tool, key) in tools"> <!--具名插槽 --> <slot v-if="tool.slot":name="tool.slot" /> <el-button v-else :key="key":type="tool.type":size="tool.size":plain="tool.plain":round="tool.round":circle="tool.circle":icon="tool.icon":style="tool.style":disabled="tool.disabled"@click.native.prevent="tool.method()" >{{ tool.label }} </el-button> </template> </div> <!--表格 --> <el-table id="wTable"ref="wTable"v-loading.wTable="woptions.loading"v-tableDrag :data="data":height="tHeight":stripe="woptions.stripe":border="woptions.border":fit="woptions.fit":span-method="spanMethod":row-key="rowKey"@selection-change="handleSelectionChange" > <!--多选框 --> <el-table-column v-if="woptions.mutiSelect":reserve-selection="true"type="selection":selectable="woptions.checkSelect"style=" 55px;"align="center" /> <!--序号 --> <el-table-column v-if="woptions.index"label="序号"type="index"style=" 55px;"align="center" /> <!--数据列 --> <template v-for="(column, index) of columns"> <!--如过有嵌套,递归多级表头 --> <template v-if="column.children && column.children.length > 0"> <WColumn :key="index":column="column" /> </template> <!--没有正常显示 --> <template v-else> <!--具名插槽 --> <slot v-if="column.slot":name="column.slot" /> <el-table-column v-else-if="!column.isHide"v-slot="scope":key="index":prop="column.prop":label="column.label":type="column.type":min-width="column.minWidth":width="column.width":align="column.align":fixed="column.fixed":show-overflow-tooltip="column.tooltip":class-name="column.class":sortable="column.sort" > <!--是否需要特殊处理 --> <template v-if="column.formatter"> <span v-html="column.formatter(scope.row, column)" /> </template> <template v-else> <!--正常显示 --> <span>{{ scope.row[column.prop] }}</span> </template> </el-table-column> </template> </template> </el-table> <!--分页 --> <div v-if="isPagination"class="pagination"> <el-pagination background :current-page="wpagination.currentPage":page-sizes="wpagination.pageArr":page-size="wpagination.pagesize"layout="total, sizes, prev, pager, next, jumper":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange" /> </div> </div> </template> <script> /** * 使用方法: * 通用的可参考 views/businessManage/businessList * 多级表头可参考 views/dingdang/privacyCallInfo * 合并行可参考 views/codeManage/routeTest */import WColumn from './WColumn'export default{ name: 'WTable', components: { WColumn }, props: { //头部按钮组 tools: { type: Array, default() { return[ {method() {}} ] } }, //数据 data: { type: Array, requre: true, default() { return[] } }, //合并行 spanMethod: Function, //多选回显key rowKey: { type: String, default: 'id'}, /** * 表格默认配置 * height: 表格高度 * stripe: 是否为斑马纹 table * border: 是否带有纵向边框 * fit: 列的宽度是否自撑开 * mutiSelect: 是否开启多选 * loading: 添加loading */options: { type: Object, default() { return{ stripe: true, border: false, fit: true, mutiSelect: false, loading: false, index: true} } }, //表格高度 tHeight: { type: Number, default: 200}, /** * 列集合 * prop: 列字段 * label: 列名称 * align: 文本显示位置 * 列固定宽度,例:200 * minWidth: 自适应宽度 例: 200 或 20% * type: 类型 * formatter: 特殊处理 * slot: 特殊列名称 * isHide: 是否隐藏列,用于动态展示列 * tooltip: 超出是否... * class: 列的class * sort: 是否排序 */columns: { type: Array, default() { return[] }, require: true}, //数据总数 total: { type: Number, default: 0}, //是否显示分页 isPagination: { type: Boolean, default: true}, /** * 分页参数 * pagesize:每页显示的条数 * currentPage:当前页码 * pageArr: 显示多少条集合 * background: 是否要背景 */pagination: { type: Object, default() { return{ pagesize: 10, background: true, currentPage: 1, pageArr: [10, 20, 50, 100] } } } }, data() { return{ //默认的表格配置 woptions: { stripe: true, border: false, fit: true, mutiSelect: false, loading: false, index: true, checkSelect() { return true} }, //默认的分页配置 wpagination: { pagesize: 10, background: true, currentPage: 1, pageArr: [10, 20, 50, 100] } } }, created() { //扩展配置,目的是引用组件不用把配置全写一遍 this.woptions =Object.assign({}, this.woptions, this.options) this.wpagination =Object.assign({}, this.wpagination, this.pagination) }, methods: { //表格多选 handleSelectionChange(val) { this.$emit('handleSelectionChange', val) }, //选择每页展示的条数 handleSizeChange(size) { this.$emit('handleSizeChange', size) }, //点击第几页 handleCurrentChange(currentPage) { this.$emit('handleCurrentChange', currentPage) } } } </script> <style lang="scss"scoped>.wTable {box-shadow:0 0 10px #eee;.toolBar { padding:10px;overflow:hidden; }.pagination {padding:30px 0;text-align:center; }#table {width:100%; }} </style>
多级表头递归子组件WColumn.vue
<template> <el-table-column v-if="!column.isHide":prop="column.prop":label="column.label":type="column.type":min-width="column.minWidth":width="column.width":align="column.align":fixed="column.fixed":show-overflow-tooltip="column.tooltip":class-name="column.class":sortable="column.sort" > <!--数据列 --> <template v-for="(item, key) of column.children"> <template v-if="item.children && item.children.length > 0"> <WColumn :key="key":column="item" /> </template> <template v-else> <!--具名插槽 --> <slot v-if="item.slot":name="item.slot" /> <el-table-column v-else-if="!item.isHide"v-slot="scope":key="key":prop="item.prop":label="item.label":type="item.type":min-width="item.minWidth":width="item.width":align="item.align":fixed="item.fixed":show-overflow-tooltip="item.tooltip":class-name="item.class":sortable="item.sort" > <!--是否需要特殊处理 --> <template v-if="item.formatter"> <span v-html="item.formatter(scope.row, item)" /> </template> <template v-else> <!--正常显示 --> <span>{{ scope.row[item.prop] }}</span> </template> </el-table-column> </template> </template> </el-table-column> </template> <script>export default{ name: 'WColumn', props: { column: { type: Object, default() { return{} } } } } </script>
自定义点击表格横向滚动指令v-tableDrag
main.js将directices.js引入即可
import Vue from 'vue'
Vue.directive('tableDrag', {
inserted: function(el) {
el = el.getElementsByClassName('el-table__body-wrapper')[0]
el.style.cursor = 'grab'
el.onmousedown = function() {
let gapX = event.clientX
let startX = el.scrollLeft
document.onmousemove = function(e) {
let x = e.clientX - gapX
el.scrollLeft = startX - x
return false
}
document.onmouseup = function() {
document.onmousemove = null
document.onmouseup = null
}
}
}
})