<template> <div> <template> <el-table ref="tableList" :data="mainData.datas" :height="mainData.tableHeight" @row-click="onRowClick" @selection-change="handleSelectionChange" style="width: 100%" > <el-table-column type="selection" width="55" v-if="showCheckBox"> </el-table-column> <template v-for="(column, ind) in mainData.columns"> <el-table-column v-bind:key="ind" :prop="column.prop" :label="column.columnName" > </el-table-column> </template> </el-table> </template> <el-pagination v-if="showPagination" class="text-right pt-1" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="mainData.pageNo" :page-sizes="[10, 25, 50, 100]" :page-size="10" background layout="total, prev, pager, next, sizes" :total="mainData.rowCount" > </el-pagination> </div> </template> <script> export default { name: 'publictable', props: { mainData: { type: Object, default: function() { return { datas: [], columns: [], tableHeight: 300, pageNo: 1, rowCount: 10 }; }, }, showCheckBox: { // 鏄惁鏄剧ず鍙€夋嫨鐨刢heckbox type: Boolean, default: false, }, showPagination: { // 鏄惁鏄剧ず椤电爜鍊� type: Boolean, default: false, }, }, mounted() {}, methods: { resetField() { let obj = {} this.mainData.params.forEach((elm) => { elm.value = '' obj[elm.name] = elm.value }) this.$emit('updataParams', obj) this.$emit('getData') }, //鏌ヨ getData() { let obj = {} this.mainData.params.forEach((elm) => { obj[elm.name] = elm.value }) this.$emit('updataParams', obj) this.$emit('getData') }, //褰撳墠椤垫敼鍙樹簨浠� handleCurrentChange(val) { this.$emit('handleCurrentChange', val) // this.$emit('getData'); }, //椤电爜澶у皬鏀瑰彉浜嬩欢 handleSizeChange(val) { this.$emit('handleSizeChange', val) this.$emit('getData') }, //琛ㄦ牸鐐瑰嚮 onRowClick(row) { this.$emit('onRowClick', row) }, //閫変腑鐨勮〃鏍兼暟鎹� handleSelectionChange(val) { this.$emit('handleSelectionChange', val) }, //鍒濆鍖栨暟鎹� init(tableData) { this.initVisible = true this.mainData = tableData this.$forceUpdate() }, }, } </script>