Requirements: The company needs the selected status of this user, and it will still be in the selected status when entering again. The editor thought to himself: I am a college student who graduated from high school, this can stump me. Just upload the code directly above the picture.
You can find that this is the table in the pop-up window, so you should pay attention: the table should be a subcomponent, because otherwise the view will not be refreshed when loading! The editor has suffered a loss.
Code level:
Subcomponent code:
<template>
<el-table :data="tabledata" @selection-change="handleSelectionChange" :row-key="getRowKeys" ref="multipleTable">
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"/>
<el-table-column label="账单ID" align="center" prop="id">
<template slot-scope="scope">
<el-popover
placement="top-start"
width="200"
trigger="hover"
popper-class="myPopover"
:content="scope.row.id">
<div slot="reference">{ {scope.row.id}}</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="Property Number" align="center" prop="houMstCode" />
<el-table-column label="Bill generation date" align="center" prop="invoiceDate" />
<el-table-column label="Bill Due Date" align="center" prop="dueDate" />
<el-table-column label="Total Amount" align="center" prop="totalAmount" />
<el-table-column label="Billing Status" align="center" prop="invoiceStatus">
<template slot-scope="scope">
<dict-tag
:options="dict.type.invoice_status"
:value="scope.row.invoiceStatus"
>
</dict-tag>
</template>
</el-table-column>
<el-table-column label="Rental Consultant" align="center" prop="followUp">
<template slot-scope="scope">
{ {formaRent(scope.row.followUp)}}
</template>
</el-table-column>
<el-table-column label="Fees Description" align="center" prop="summary" >
<template slot-scope="scope">
<el-popover
placement="top-start"
width="200"
trigger="hover"
popper-class="myPopover"
:content="scope.row.summary">
<div slot="reference">{ {scope.row.summary}}</div>
</el-popover>
</template>
</el-table-column>
</el-table>
</template>
<script>
import { listfollowup } from "@/api/followup";
export default {
name: 'Relatedbilltable',
dicts: ["invoice_status"],
props: ['tabledata','currentId'],
data() {
return {
showbtnflag: false,
multipleSelection:[],
followoptions: [],
}
},
mounted() {
this.getfollowup()
},
methods: {
getRowKeys(row){
return row.id;
},
//Get followers
getfollowup() {
this.followoptions = [];
listfollowup(2).then((res) => {
if ((res.data != "") | (res.data != null)) {
for (let i = 0; i < res.data.length; i++) {
var list = {
name: res.data[i].userName,
value: res.data[i].userId,
};
this.followoptions.push(list);
}
}
});
},
formaRent(val) {
let name = null
this.followoptions.forEach(item => {
if (val == item.value) {
name = item.name
}
});
return name
},
handleSelectionChange(val) {
this.$emit('SelectionChange', val)
},
toggleSelec() {
this.$nextTick(() => {
this.tabledata.forEach(item => {
if (this.currentId.includes(item.id)) {
this.$refs.multipleTable.toggleRowSelection(item);
}
})
})
},
clearSelections() {
this.$refs.multipleTable.clearSelection();
}
}
}
Parent component introduces child component:
<Relatedbilltable :tabledata="billLsit" :currentId="currentRowId" ref="multipleTables" @SelectionChange="handleSelectionChanges($event)"></Relatedbilltable>
Parent component related code:
//Associated billing options, this.form.invoiceIds requires a backend. If you enter this page again, you need it to return it to you.
handleSelectionChanges(val) {
let arr =[]
val.forEach(item => {
arr.push(item.id)
});
arr = Array.from(new Set(arr))
this.form.invoiceIds = arr.join("-")
},
//To close this page, you need to clear the selections
closebillOpen() {
this.billsOpen = false
this.$refs.multipleTables.clearSelections()
},
//The following function obtains the list for the parent component. This.currentRowId is the selected item id returned by the background.
updateRelatedbill() {
this.currentRowId = []
this.billLsit= []
this.billParams.custId = this.form.custId
unpaidAndPendingReview(this.billParams).then(res => {
this.billLsit = res.rows;
this.totals = res.total;
this.billsOpen = true
if (this.form.invoiceIds) {
this.currentRowId = this.form.invoiceIds.split("-")
setTimeout(() => {
this.$refs.multipleTables.toggleSelec()
}, 400);
}
});
},