1.封装的vue文件
<template>
<div>
<el-table
:data="data"
style="width: 100%"
@selection-change="handleTableCurrentChange"
@row-click="handleTableRowClick"
:cell-style="cellStyle"
:highlight-current-row="highlightCurrent"
v-loading="loading"
element-loading-text="数据加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(6, 91, 91,0.9)"
>
<template v-for="(item, index) in columns">
<el-table-column
v-if="item.selection"
type="selection"
:key="`selection_${index}`"
></el-table-column>
<!-- 序号 -->
<el-table-column
v-else-if="item.index"
type="index"
label="序号"
:index="item"
:key="`index_${index}`"
></el-table-column>
<!-- 多级表头 -->
<el-table-column
v-else-if="item.multi"
align="center"
:label="item.label"
:key="`multi_${index}`"
>
<el-table-column
v-for="(child, childIndex) in item.children"
:key="`child_${index}_${childIndex}`"
v-bind="child"
>
</el-table-column>
</el-table-column>
<!-- 自定义内容 -->
<slot
v-else-if="item.slot"
show-overflow-tooltip
:name="item.slot"
:fixed="item.fixed"
:height="item.height"
></slot>
<!--常规内容-->
<el-table-column
v-else
v-bind="item"
:key="`normal_${index}`"
>
</el-table-column>
</template>
</el-table>
<div class="block">
<el-pagination
v-if="isPaginationShow && pagination.total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pagination.current"
:page-size="pagination.size"
layout="total ,prev, pager, next, jumper"
:total="pagination.total">
</el-pagination>
</div>
</div>
</template>
<script>
export default {
name: 'tableView',
props:{
columns: {
type: Array,
default: () => [],
},
data: {
type: Array,
default: () => [],
},
pagination: {
type: Object,
default: () => ({
current: 1,
size: 10,
total: 0,
}),
},
isPaginationShow: {
type: Boolean,
default: true,
},
wrapperHeight: {
type: [Number, String],
default: '100%', // 一般情况下,更多地是配置父元素的高度,table的高度根据父元素高度计算
},
height: {
type: [Number, String],
default: 'calc(100% - 48px)', // table的默认高度是 父元素高度 减去 pagination高度,一般情况下,这个默认配置就够用了,有特殊场景可以另配置
},
maxHeight: {
type: [Number, String],
default: 'auto',
},
tableSize: {
type: String,
default: 'small',
},
stripe: {
type: Boolean,
default: true,
},
otherConfig: {
type: Object,
default: () => {},
},
loading: {
type: Boolean,
default: false,
},
highlightCurrent: {
type: Boolean,
default: false,
},
},
data(){
return{
}
},
methods:{
cellStyle: function (e) { //{row,column,rowIndex,columnIndex}
let obj = {};
this.$emit("cellStyle", e, (color = {}) => { //将事件返回到调用组件的页面去判断 应该现实的颜色
obj = color;
});
return obj;
},
// 切换页码
handleCurrentChange(val) {
console.log("000000",val)
this.$emit('getData');
},
// 切换每页条数
handleSizeChange(value) {
// current-page和 page-size都支持 .sync修饰符,用了.sync修饰符,就不需要手动给 this.pagination赋值了
this.pagination.size = value;
this.$emit('getData');
},
// 切换选择
handleSelectionChange(val) {
this.$emit('changeSelection', val);
},
// 单选
handleTableCurrentChange(currentRow) {
console.log("changeCurr1111111ent",currentRow)
this.$emit('changeCurrent', currentRow);
},
// 点击行
handleTableRowClick(currentRow) {
this.$emit('rowClick', currentRow);
},
},
watch: {
data() {
// 重新请求数据时 table滚动到顶部
},
pagination(newData,oldData){
console.log("newData",newData)
}
},
mounted () {
console.log("columns",this.columns)
}
}
</script>
<style scoped>
</style>
2.在其它页面调用的方法
1)引入table封装组件
import TableView from "@/components/TableView/index";
export default {
components: {TableView},
dicts: ['emDrillShape', 'emDrillScope'], //字典引用
data() {
return{
//查询
queryParams: {
organizationDepartment: '',
drillingShape: '',
organizeUnit: ''
},
//分页
pagination: {
current: 1,
size: 5,
total: 0,
},
//表格数据
rTableData: [],
Columns: [
{
index: true,
indexMethod(index) {
return index + 1;
},
},
{selection: true,},
{prop: 'drillingTheme', label: '演练主题'},
// { slot: 'dispatchState', },
{prop: 'planName', label: '演练计划'},
{prop: 'drillingTime', label: '演练时间'},
{prop: 'drillingNum', label: '演练人数'},
{prop: 'organizeUnit', label: '演练组织单位'},
{prop: 'organizationDepartment', label: '演练组织部门'},
{prop: 'organizationDepartment', label: '演练部门'},
{prop: 'drillingShape', label: '演练形式', formatter: this.handleDrillingShape},
{prop: 'drillingAddr', label: '演练地点'},
{prop: 'siteLead', label: '现场指挥'},
{prop: 'recordUser', label: '记录人'},
{prop: 'createUserName', label: '填报人'},
{prop: 'orgName', label: '填报部门'},
{prop: 'companyName', label: '所属公司'},
{slot: 'action',},
],
}
}
}
2)table代码引用
<TableView
:columns="Columns"
:data="rTableData"
:pagination="pagination"
@getData="getEmerDrillRecordsList"
:loading="loading"
@changeCurrent="changeCurrent"
:isPaginationShow="true"
wrapperHeight="calc(100% - 45px)">
<!-- wrapperHeight:父元素高度根据实际布局情况配置,大多情况可能是 外层祖父元素高度 减去 其他兄弟元素的高度,如果外层祖父元素高度或者兄弟元素的高度不固定,可能需要借助 js来计算 -->
<el-table-column slot="action" label="操作" width="150">
<template slot-scope="scope">
<el-button type="text" size="small" click="checkDrillRecord(scope.row.drillingId)" class="qgreen" v-hasPermi="['system:emergencyDrillingInfo:query']">查看
</el-button>
<el-button type="text" size="small" @click="editDrillRecord(scope.row)" class="qgreen" v-hasPermi="['system:emergencyDrillingInfo:edit']">修改
</el-button>
<el-button type="text" size="small" @click="delDrillRecord(scope.row.drillingId)" class="orange" v-hasPermi="['system:emergencyDrillingInfo:remove']">删除
</el-button>
</template>
</el-table-column>
</TableView>
3.获取列表方法
//获取列表
getEmerDrillRecordsList() {
//分页
this.queryParams.pageNum = this.pagination.current
this.queryParams.pageSize = this.pagination.size
listEmergencyDrillingInfo(this.queryParams).then(res => {
this.rTableData = res.rows
this.pagination.total = res.total
this.loading = false
})
},