需求:公司需求这个用户的选中状态，再次进入还是选中状态。小编心想：我可是高中毕业的大学生，能难倒我。直接上图上代码。
可以发现这是弹窗里面的table表格，那么就应该注意:table表格应该是子组件，因为不然视图加载不会刷新！小编吃过亏。
代码层面:
子组件代码：
<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="房源编号" align="center" prop="houMstCode" />
<el-table-column label="账单生成日" align="center" prop="invoiceDate" />
<el-table-column label="账单到期日" align="center" prop="dueDate" />
<el-table-column label="总金额" align="center" prop="totalAmount" />
<el-table-column label="账单状态" 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="租房顾问" align="center" prop="followUp">
<template slot-scope="scope">
{ {formaRent(scope.row.followUp)}}
</template>
</el-table-column>
<el-table-column label="费用说明" 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;
},
//获取跟进人
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();
}
}
}
父组件引入子组件：
<Relatedbilltable :tabledata="billLsit" :currentId="currentRowId" ref="multipleTables" @SelectionChange="handleSelectionChanges($event)"></Relatedbilltable>
父组件相关代码：
// 关联账单选择项其中this.form.invoiceIds是要个后台的 你再进入此页面需要他给你返回过来
handleSelectionChanges(val) {
let arr =[]
val.forEach(item => {
arr.push(item.id)
});
arr = Array.from(new Set(arr))
this.form.invoiceIds = arr.join("-")
},
//关闭此页面需要清空选择项
closebillOpen() {
this.billsOpen = false
this.$refs.multipleTables.clearSelections()
},
//下面的函数为父组件获取列表的操作 其中this.currentRowId为后台返回的选中项id
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);
}
});
},