<template>
<div class="table-container" :style="{'border-width':options.border?'12px !important':'0px !important'}">
<div>
<el-row v-if="head.show" class="table-title">
<el-col :span="6">
<div class="title-header">
<el-popover
v-if="toolsOption.selectColumns"
v-model="visible"
placement="bottom-start"
trigger="click">
<div class="popper-div">
<div v-for="(column,index) in columnsChecked" :key="index">
<el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
</div>
<div class="popper-btns">
<el-button size="mini" type="" @click="initColumnsState">取消</el-button>
<el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
</div>
</div>
<i slot="reference" ref="icon" :class="animateClass" class="el-icon-menu" @mouseenter="iconRotate" @mouseleave="removeAnimateClass"/>
</el-popover>
<i v-else class="el-icon-menu"/>
{{ head.text }}
</div>
</el-col>
<el-col :span="18" class="edit_btns">
<slot name="btns"/>
</el-col>
</el-row>
<!--工具栏-->
<el-row class="tool" type="flex" justify="right">
<el-col>
<el-button-group style="float: right">
<!--显示列筛选工具-->
<el-popover
v-if="toolsOption.selectColumns"
v-model="visible"
placement="bottom-end"
trigger="click">
<div class="popper-div">
<div v-for="(column,index) in columnsChecked" :key="index">
<el-checkbox v-model="column.show" >{{ column.text }}</el-checkbox>
</div>
<div class="popper-btns">
<el-button size="mini" type="" @click="initColumnsState">取消</el-button>
<el-button size="mini" type="primary" @click="changeColumns">确定</el-button>
</div>
</div>
<el-button slot="reference" type="" icon="el-icon-menu" size="mini"/>
</el-popover>
<!--刷新按钮-->
<el-button v-if="toolsOption.refresh" type="" icon="el-icon-refresh" size="mini" @click="refresh"/>
</el-button-group>
</el-col>
</el-row>
<!-- 表格正文-->
<el-table v-loading="listLoading" :data="data" :size="size" class="table" row-class-name="small-row-class" border @selection-change="selectionChange" @row-click="rowClick">
<!--需要加在表最前方的插槽-->
<slot name="preColumns"/>
<!--序号列-->
<el-table-column v-if="options && options.needIndex" :index="indexMethod" label="#" align="center" type="index"/>
<!--内容列, 若columns存在且长度大于0-->
<template v-if="columnsFiltered && columnsFiltered.length>0">
<el-table-column
v-for="column in columnsFiltered"
:key="column.value"
:label="column.text"
:width="column.width"
:align="column.align?column.align:'center'"
:show-overflow-tooltip="column.showOverflow?column.showOverflow:true">
<template slot-scope="scope">
<span>{{ scope.row[column.value] }}</span>
</template>
</el-table-column>
</template>
<!--自定义的放这里-->
<slot name="columns"/>
</el-table>
</div>
<!--分页-->
<div v-show="pagination" class="pagination-container">
<el-pagination
:current-page="query.offset"
:page-sizes="pageSizes"
:page-size="query.limit"
:total="total"
align="center"
layout="total, sizes, prev, pager, next"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"/>
</div>
</div>
</template>
<script>
export default {
name: 'NormalTable',
props: {
query: {
type: Object,
default: function() {
return {
offset: 1,
limit: 20
}
}
}, // 查询条件，此处主要需要分页的条件
head: {
type: Object,
default: function() {
return {
show: true,
text: '数据列表'
}
}
}, // 是否显示头，一般需要再此行中加按钮需要设置为true
listLoading: {
type: Boolean,
default: false
}, // loading状态
data: {
type: Array,
default: function() {
return []
}
}, // 数据
total: {
type: Number,
default: 0
}, // 数据总数
columns: {
type: Array,
default: function() {
return []
}
}, // 列
pagination: {
type: Boolean,
default: true
}, // 是否分页
options: {
type: Object,
default: function() {
return {
needIndex: true, // 是否需要序号列
border:false // 是否需要上方边框
}
}
}, // 配置项
pageSizes: {
type: Array,
default: function() {
return [10, 20, 30]
}
},
size: {
type: String,
default: 'small'
}, // 表格大小，默认，small,mini等，与el-table条件仙童
toolsOption: {
type: Object,
default: function() {
return {
selectColumns: false, // 是否需要筛选列工具
refresh: false // 是否需要刷新按钮
}
}
}// 表格工具配置
},
data() {
return {
columnsFiltered: [], // 过滤后的列情况
columnsChecked: [], // 显示列选择情况
visible: false, // 弹窗显示情况
animateClass: '' // 按钮动画效果
}
},
watch:{
columns(val){
this.initColumnsState()
this.changeColumns()
}
},
created() {
// 初始化状态值为全部显示
this.initColumnsState()
this.changeColumns()
},
methods: {
// 初始化显示列状态
initColumnsState() {
this.columnsChecked = []
for (const column of this.columns) {
if (column.show === false) {
this.columnsChecked.push({ text: column.text, show: false })
} else {
this.columnsChecked.push({ text: column.text, show: true })
}
}
this.visible = false
},
// 修改显示列
changeColumns() {
this.columnsFiltered = []
for (const i in this.columns) {
if (this.columnsChecked[i].show === true) {
this.columnsFiltered.push(this.columns[i])
}
}
this.visible = false
},
// 序号计算
indexMethod(index) {
return this.query.limit * (this.query.offset - 1) + index + 1
},
// 刷新
refresh() {
this.$emit('change')
},
// 改变页容量
handleSizeChange(val) {
this.query.limit = val
this.$emit('change', { size: val })
},
// 改变当前页
handleCurrentChange(val) {
this.query.offset = val
this.$emit('change', { page: val })
},
// 按钮旋转动画
iconRotate() {
this.animateClass = 'animated swing'
},
// 移除动画
removeAnimateClass() {
this.animateClass = ''
},
selectionChange(selection) {
this.$emit('selectionChange', selection)
},
rowClick(row, column, event) {
this.$emit('row-click', row)
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.table{
margin-bottom: 20px;
}
.pagination-container{
padding-bottom: 50px;
}
.table-title{
/*background-color:rgba(243, 243, 243, 1);*/
background-color:#fff;
.title-header{
font-size: 15px;
i{
margin-left: 10px;
margin-right: 5px;
}
i:focus{
outline: none;
}
}
}
.edit_btns{
padding-top:7px;
padding-right:5px;
text-align: right;
}
.popper-div{
line-height: 1.5;
.popper-btns{
margin-top:10px;
}
}
</style>
