table封装加分页,新建一个table.vue 文件:
用法:1、在相应页面引入table.vue文件,并调用
<template>
<div>
<single-table
:data="pageResult"
:columns="columns"
:handleWidth="90"
ref="mytable"
v-loading="loading"
@findPage="findPage"
:setPageNow="setPageNow">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="detailsView(scope)">查看详情</el-button>
</template>
</single-table>
<div>
<template>
<javascript>
import singleTable from "@/components/Base/table"
export default {
components:{
singleTable,
},
data(){
return {
loading:false,
setPageNow:false,
pageResult:{},
columns:[
{ prop: "code", label: "交付单编号", minWidth: 80, sortable: false },
{ prop: "amount", label: "金额(元)", minWidth: 80 ,formatter:this.setAmount},
{ prop: "businessDate", label: "交付日期", minWidth: 60 },
],
pageRequest:{
pageNow: 1,
pageSize: 20
},
formInline:{
aa:'',
bb:''
}
}
},
mounted(){
this.findPage(null)
},
methods:{
setAmount(row, column){
return this.amountRule(row.amount)
},
findPage(data) {
this.loading = true;
if (data !== null) {
this.pageRequest = data.pageRequest;
} else {
this.setPageNow = !this.setPageNow;
}
this.pageRequest.params = this.formInline;
this.$api.credit.financeCreditList(this.pageRequest).then(res => {
const { statusText, status, data } = res;
if (status == this.SUCCESS_STATUS) {
this.pageResult = data;
this.loading = false;
} else {
this.$message({ message: statusText, type: "error" });
this.loading = false;
}
}).then(data!=null?data.callback:'').catch(response => {
this.loading = false
});;
},
}
}
</javascript>
table.vue 的代码如下,请直接复制,还可以根据自己的需求来修改。
<template>
<div>
<!--
表格栏-->
<el-table
:data="data.content"
:highlight-current-row="highlightCurrentRow"
@selection-change="selectionChange"
@current-change="handleCurrentChange"
@expand-change="expandChange"
@row-click="rowClick"
v-loading="loading"
:show-summary="showSummary"
:element-loading-text="$t('action.loading')"
:border="border"
:stripe="stripe"
:default-expand-all="expandAllStatus"
:row-class-name="tableRowClassName"
:show-overflow-tooltip="showOverflowTooltip"
:max-height="maxHeight"
:size="size"
:align="align"
:ref="multipleTable"
style="width:100%;"
>
<el-table-column v-if="showRadio" width="50" :label="'选择'">
<template slot-scope="scope">
<el-radio v-model="radioVal" :label="scope.row.id"> </el-radio>
</template>
</el-table-column>
<!-- 多选框 -->
<el-table-column v-if="showCheckbox" type="selection" width="40"></el-table-column>
<!-- 下拉展开 -->
<el-table-column type="expand" class="psexpand" v-if="showExpand">
<template slot-scope="props">
<el-form inline>
<!-- 下拉展开一个列表 -->
<el-table :data="props.row[children]" v-if="changeSelect=='one'" inline size="small" class="psexpand" style="width: 100%;font-size:12px;">
<el-table-column
v-for="column in columnsSelectDown"
header-align="center"
align="center"
:show-overflow-tooltip="true"
:prop="column.prop"
:label="column.label"
:width="column.width"
:min-width="column.minWidth"
:key="column.prop"
:type="column.type"
:sortable="false">
</el-table-column>
</el-table>
<!-- 下拉展开一个列表结束 -->
<!-- 下拉展开面板形式 -->
<div v-if="panel" class="wrap-down-Text">
<p>资金方:<span v-for="clums in props.row[children1]" :key="clums.index">{{clums.orgName}}</span></p>
<p>资产池:<span v-for="clums in props.row[children2]" :key="clums.index">{{clums.name}}</span></p>
</div>
</el-form>
</template>
</el-table-column>
<el-table-column
type="index"
label="序号"
align="center"
width="50">
<template slot-scope="scope">
<span>{{scope.$index+(pageRequest.pageNow - 1) * pageRequest.pageSize + 1}} </span>
</template>
</el-table-column>
<!-- 下拉展开结束 -->
<el-table-column
v-for="column in columns"
header-align="center"
align="center"
:show-overflow-tooltip="true"
:prop="column.prop"
:label="column.label"
:width="column.width"
:min-width="column.minWidth"
:fixed="column.fixed"
:key="column.prop"
:type="column.type"
:formatter="column.formatter"
:sortable="false"
:selectable="selectable"
>
</el-table-column>
<el-table-column v-if="statusParams.status" width="80" :label="statusParams.label">
<template slot-scope="scope">
<el-switch
v-model="scope.row[statusParams.model]"
:active-color="statusParams.color"
:active-value="statusParams.active"
:inactive-value="statusParams.inactive"
@change='changeStatusGL($event, scope.row)'
>
</el-switch>
</template>
</el-table-column>
<el-table-column
v-if="showOperation"
fixed="right"
header-align="center"
align="center"
:width="handleWidth"
:label="'操作'"
>
<template slot-scope="scope">
<slot :row="scope.row"></slot>
</template>
</el-table-column>
</el-table>
<!--分页栏-->
<div class="toolbar" style="padding:28px;">
<el-pagination
background
layout="total, prev, pager, next, jumper"
@current-change="refreshPageRequest"
:current-page="pageRequest.pageNow"
:page-size="pageRequest.pageSize"
:total="data.totalCount"
style="float:right;"
></el-pagination>
</div>
</div>
</template>
<script>
import { convertDict } from "@/dict/index.js";
export default {
name: "KtTable",
components: {
},
props: {
changeSelect:{
type: String,
default:'one'
},
setPageNow:Boolean,
columns: Array,
data: Object,
columnsSelectDown:Array,
columnsSelectDown1:Array,
columnsSelectDown2:Array,
columnsSelectDown3:Array,
isBgColor:{
type: Boolean,
default: false
},
isBgColorNum: Array,
panel:{
type: Boolean,
default: false
},
relateType:{
type:String,
default:''
},
children:{
type:String,
default:'children'
},
children1:{
type:String,
default:'children1'
},
children2:{
type:String,
default:'children2'
},
children3:{
type:String,
default:'children3'
},
passWidth:Boolean,
showExpand: {
type: Boolean,
default: false
},
size: {
type: String,
default: "mini"
},
expandAllStatus:{
type: Boolean,
default: false
},
expandArray:{
type: Array,
default:function () {
return []
}},
align: {
type: String,
default: "left"
},
statusParams:{
type: Object,
default:function () {
return {}
}
},
listParams:{
type: Object,
default:function () {
return {}
}
},
pageRequest: {
type: Object,
default () {
return {
pageNow: 1,
pageSize: 20
}
}
},
maxHeight: {
type: Number,
default: 1000
},
handleWidth: {
type: Number,
default: 120
},
showOperation: {
type: Boolean,
default: true
},
showRadio: {
type: Boolean,
default: false
},
showCheckbox: {
type: Boolean,
default: false
},
userStatus: {
type: Boolean,
default: false
},
border: {
type: Boolean,
default: true
},
stripe: {
type: Boolean,
default: false
},
highlightCurrentRow: {
type: Boolean,
default: true
},
showOverflowTooltip: {
type: Boolean,
default: true
},
firstP:{
type: Boolean,
default: false
},
showSummary:{
type: Boolean,
default: false
},
multipleTable:{
type:String,
default:"multipleTable"
}
},
data() {
return {
radioVal: "",
setWidth: 120,
first:1,
loading: false,
userId: sessionStorage.getItem("userId"),
role: sessionStorage.getItem("role"),
selections: [],
};
},
watch:{
setPageNow(){
this.pageRequest.pageNow = 1
}
},
methods: {
selectable(row,index){
if(row.isSelectable){
return false
}else{
return true
}
},
toggleRowExpansion(row) {
this.$refs[this.multipleTable].toggleRowExpansion(row, true);
},
expandChange(row,expandedRows){
this.$emit("expandChange", row,expandedRows);
},
findPage: function() {
this.loading = false;
let callback = res => {
this.loading = false;
};
if(this.firstP){
if(this.first==1){
this.first++
return false
}
}
this.$emit("findPage", {
pageRequest: this.pageRequest,
callback: callback
});
},
selectionChange: function(selections) {
this.selections = selections;
this.$emit("selectionChange", { selections: selections });
},
handleCurrentChange: function(val) {
this.radioVal = ''
if (val !== null) {
this.radioVal = val.id;
}
this.$emit("handleCurrentChange", { val: val });
},
changeStatusGL(event,row){
this.$emit("changeStatusGL", row);
},
clearRadio() {
this.radioVal = "";
},
rowClick: function(row) {
this.$emit("rowClick", { row: row });
},
handleLookAnalysis(index, row) {
this.$emit("handleLookAnalysis", index, row);
},
refreshPageRequest: function(pageNow) {
this.pageRequest.pageNow = pageNow;
this.findPage();
},
setWidthMethods:function () {
if(this.passWidth == true){
this.setWidth = 200
}
},
tableRowClassName({row, rowIndex}) {
if(this.isBgColor == true){
if (row[this.isBgColorNum[0]] == this.isBgColorNum[1] ) {
return 'err-row';
}
if(row[this.isBgColorNum[0]] == this.isBgColorNum[2] ){
return 'warning-row';
}else{
return '';
}
}
}
},
mounted() {
this.refreshPageRequest(1);
},
created() {}
};
</script>
<style lang="scss" scoped>
.psexpand{
position: relative;
z-index: 1000;
}
/deep/ .wrap-down-Text{
font-size: 14px;
font-weight: 600;
padding-left: 20px;
span{
font-size: 14px;
font-weight: 400;
margin-right: 15px;
}
}
/deep/ .el-table .err-row {
background: #fd8585;
}
/deep/ .el-table .warning-row {
background: #f7d17b;
}
/deep/ .el-table .success-row {
background: #f0f9eb;
}
</style>