<template>
<div class='tableBox'>
<div>
<el-table v-loading="loading"
element-loading-text="正在加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255,255,255, 0.8)"
:data="tableData"
ref="multipleTable"
@selection-change="handleSelectionChange"
:highlightCurrentRow="highlightCurrentRow"
@current-change="handleCurrentChange"
:max-height="tableHeight"
@filter-change="filterTag"
@sort-change='sortChange'
@row-click="handleClick"
@cell-click="cellClick"
@expand-change="expandChange"
:span-method="arraySpanMethod"
border
style="width: 100%"
size="mini"
:row-class-name="rowClassName"
:cell-style="cellStyle"
:header-cell-style="headerCellStyle"
:row-key="rowId"
:show-header="status"
:id="tableId"
:lazy="lazy"
:load="loadChildren"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<template v-for="(item, index) of model">
<el-table-column
v-if="item.type === 'expand'"
:type="item.type"
:prop="item.prop"
:width="item.width || 30"
:key="index">
<template slot-scope="scope">
<slot :name="item.prop" :row="scope.row" :$index="scope.$index"></slot>
</template>
</el-table-column>
<!-- 表格序列 -->
<el-table-column
fixed
v-else-if="item.type === 'index'"
:label="item.label"
:type="item.type"
:width="item.width || 60"
:key="index">
</el-table-column>
<el-table-column
sortable='custom'
v-else-if="item.type === 'sortable'"
:prop="item.prop"
:label="item.label"
:width="item.width"
:min-width="item.minWidth"
:key="index">
</el-table-column>
<!-- 多选表格 -->
<el-table-column
v-else-if="(item.type === 'selection') && (typeof(item.show)=='function'?item.show():(item.show!=undefined?item.show:true))"
:label="item.label"
:type="item.type"
:width="item.width"
:min-width="item.minWidth"
:fixed="item.fixed"
:key="index">
</el-table-column>
<!-- 自定义模板表格列 -->
<el-table-column
v-else-if="item.template"
:prop="item.prop"
:label="item.label"
:width="item.width"
:column-key="item.columnKey"
:filters="item.filters?item.filters:null"
:filter-multiple="item.filterMultiple?item.filterMultiple:null"
:min-width="item.minWidth"
:show-overflow-tooltip="true"
:align="item.align"
:fixed="item.fixed"
:key="index">
<template slot-scope="scope">
<slot :name="item.prop" :row="scope.row" :$index="scope.$index"></slot>
</template>
</el-table-column>
<!-- 原生element-ui列 -->
<el-table-column
v-else-if="!(item.type === 'selection') && (typeof(item.show)=='function'?item.show():(item.show!=undefined?item.show:true))"
:prop="item.prop"
:label="item.label"
:width="item.width"
:column-key="item.columnKey"
:filters="item.filters?item.filters:null"
:filter-multiple="item.filterMultiple?item.filterMultiple:null"
:min-width="item.minWidth"
:show-overflow-tooltip="true"
:align="item.align"
:fixed="item.fixed"
:key="index">
</el-table-column>
</template>
</el-table>
</div>
<!-- 反选按钮 -->
<div class="mtop10 invertBtn" v-if="isShowBtn">
<el-button type="primary" size="mini" plain @click="invertCheck">反选</el-button>
</div>
<!-- 表格分页 -->
<div class="text-center mtop10" v-if="isShowPage">
<el-pagination
background
layout="prev, pager, next, sizes, total, jumper"
:total="totalSize"
:current-page='page.pageNumber'
:page-size='page.pageSize'
:page-sizes='pageSizes'
@current-change='changePage'
@size-change='changeSize'
>
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'FrTable',
props: {
tableData: { type: Array, default () { return [] } },
totalSize: { type: Number, default: 0 },
/**
* @param {Array} model - 表格模型
* @param {String} model.label - 列头标题
* @param {String} model.prop - 列头字段名，对应的tableData中的key
* @param {String} model.template - 自定义列模板名称，对应slot的name
* @param {String} model.type - 列类型 可选值 index, checkbox
* @param {Boolean} model.hidden - 列是否隐藏
* @param {String} model.align 表格列对齐方式 可选值 left,right,center
*/
highlightCurrentRow: { type: Boolean, default: false },
model: { type: Array, required: true },
arraySpanMethod: {type: Function,default () { return function(){} } },
/***
* row为某一行的除操作外的全部数据
* column为某一列的属性
* rowIndex为某一行（从0开始数起）
* columnIndex为某一列（从0开始数起）
*/
cellStyle: {type: Function,default () { return function(){} } },
headerCellStyle: {type: Object,default () { return {} } },
rowClassName: {type: Function,default () { return function(){} } },
isShowPage: { type: Boolean, default: true },
isShowBtn: { type: Boolean, default: false },
rowId: { type: String, default: null },
lazy: { type: Boolean, default: false },
loadChildren:{ type: Function,default () { return function(){} } },
loading: { type: Boolean, default: false },
tableHeight: { type: Number, default: 500 },
status: { type: Boolean, default: true },
tableId: { type: String, default: null }
},
data () {
return {
page: {pageNumber: 1, pageSize: 10 },
pageSizes: [10, 20, 30, 50, 100, 200],
isChangePage: false, // 标志变量，是否为切换当前页
selectList: []
}
},
watch: {
tableHeight(newValue) {
this.tableHeight = newValue
},
immediate:true,//关键
deep:true// 深度监听父组件传过来对象变化
},
methods: {
sortChange(column, prop, order) {
this.page.order = column.order;
this.getTableList();
this.isChangePage = false;
},
expandChange(row){
this.$emit("expandChange", row)
},
getTableList () {
if (this.isChangePage) {
this.isChangePage = false
} else {
this.page.pageNumber = 1
}
this.$emit("getTableList", this.page);
},
// 当type为selection时，出发选择事件
handleSelectionChange (val) {
this.selectList = val
this.$emit('multipleSelect', val)
},
//行绑定事件
handleClick(val){
this.$emit("handleClick", val)
},
//单元格绑定事件
cellClick(row, column, cell, event){
this.$emit("cellClick", row, column, cell, event)
},
handleCurrentChange (val) {
// this.currentRow = val;
this.$emit('singleSelect', val)
},
// 页面跳转
评论0