요구사항: 회사는 이 사용자의 선택 상태를 필요로 하며, 재가입 시에도 선택 상태를 유지합니다. 편집자는 속으로 생각했습니다. 나는 고등학교를 졸업한 대학생이다. 이것이 나를 당황하게 할 수 있다. 사진 바로 위에 코드를 업로드하면 됩니다.
이것이 팝업 창에 있는 테이블이라는 것을 알 수 있으므로 주의해야 합니다. 테이블은 하위 구성요소여야 합니다. 그렇지 않으면 로드할 때 뷰가 새로 고쳐지지 않기 때문입니다! 편집자는 손해를 입었습니다.
코드 수준:
하위 구성 요소 코드:
<템플릿>
<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">
<템플릿 슬롯 범위="범위">
<엘-팝오버
배치="최상위 시작"
폭="200"
트리거="호버"
popper-class="myPopover"
:content="scope.row.id">
<div 슬롯="참조">{ {scope.row.id}}</div>
</el-팝오버>
</템플릿>
</el-테이블-열>
<el-table-column label="속성 번호" align="center" prop="houMstCode" />
<el-table-column label="청구서 생성 날짜" align="center" prop="invoiceDate" />
<el-table-column label="Bill Due Date" align="center" prop="dueDate" />
<el-table-column label="총 금액" align="center" prop="totalAmount" />
<el-table-column label="Billing Status" align="center" prop="invoiceStatus">
<템플릿 슬롯 범위="범위">
<dict-태그
:options="dict.type.invoice_status"
:value="scope.row.invoiceStatus"
>
</dict-태그>
</템플릿>
</el-테이블-열>
<el-table-column label="렌탈 컨설턴트" align="center" prop="followUp">
<템플릿 슬롯 범위="범위">
{ {formaRent(scope.row.followUp)}}
</템플릿>
</el-테이블-열>
<el-table-column label="요금 설명" align="center" prop="summary" >
<템플릿 슬롯 범위="범위">
<엘-팝오버
배치="최상위 시작"
폭="200"
트리거="호버"
popper-class="myPopover"
:content="scope.row.summary">
<div 슬롯="참조">{ {scope.row.summary}}</div>
</el-팝오버>
</템플릿>
</el-테이블-열>
</el-테이블>
</템플릿>
<스크립트>
"@/api/followup"에서 { listfollowup }을 가져옵니다.
기본값 내보내기 {
이름: '관련 청구표',
dicts: ["invoice_status"],
소품: ['tabledata','currentId'],
데이터() {
반품 {
showbtnflag: 거짓,
다중 선택:[],
다음 옵션: [],
}
},
탑재() {
this.getfollowup()
},
방법: {
getRowKeys(행){
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 목록 = {
이름: res.data[i].userName,
값: res.data[i].userId,
};
this.followoptions.push(list);
}
}
});
},
형식렌트(발) {
이름 = null로 설정
this.followoptions.forEach(item => {
if (val == item.value) {
이름 = 항목.이름
}
});
반환 이름
},
handlerSelectionChange(val) {
this.$emit('SelectionChange', val)
},
토글선택() {
this.$nextTick(() => {
this.tabledata.forEach(항목 => {
if (this.currentId.includes(item.id)) {
this.$refs.multipleTable.toggleRowSelection(item);
}
})
})
},
클리어선택() {
this.$refs.multipleTable.clearSelection();
}
}
}
상위 구성요소는 하위 구성요소를 소개합니다.
<Relatedbilltable :tabledata="billLsit" :currentId="currentRowId" ref="multipleTables" @SelectionChange="handleSelectionChanges($event)"></Relatedbilltable>
상위 구성 요소 관련 코드:
//관련 결제 옵션인 this.form.invoiceIds에는 백엔드가 필요합니다. 이 페이지를 다시 입력하면 이를 반환하기 위해 필요합니다.
handlerSelectionChanges(val) {
arr =[]라고 놔두세요
val.forEach(항목 => {
arr.push(item.id)
});
arr = Array.from(new Set(arr))
this.form.invoiceIds = arr.join("-")
},
//이 페이지를 닫으려면 선택 항목을 지워야 합니다.
closebillOpen() {
this.billsOpen = 거짓
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.toggleSelect()
}, 400);
}
});
},