1.页面实现效果:
审核通过可批量处理,可单选;审核不通过,单选,但两者不可同时勾选☑️
2.代码如下
<template lang="pug">
.financing-order-tab
.table-container
.btns(style="margin-bottom: 15px")
el-button(type="primary" size="mini", @click="handleCheck") 批量初审
el-button(type="primary" size="mini", @click="handleReview") 批量复审
el-table.no-wrap-cell(:data="tableData",ref="multipleTable",style="width: 100%", size="small" show-summary, :summary-method="getSummaries",@selection-change="handleSelectionChange",:row-key="getRowKey")
el-table-column(fixed="left", label="审核通过",width="60",align="center")
el-table-column(fixed="left",type="selection",align="center", width="60", :selectable="disableSelect")
el-table-column(fixed="left", label="审核不通过",width="60",align="center",:render-header="renderCustomHeader")
template(slot-scope="scope")
el-checkbox(:disabled="disableRow(scope.row)",v-model="scope.row.isChecked",@change="handleSecondColumnCheckboxChange(scope.$index, scope.row)")
el-table-column(prop="projectCode", label="项目编号", width="180")
el-table-column(prop="orgName", label="服务商", width="180")
el-table-column(prop="stationDetailAddress", label="预约安装详细地址", width="180")
el-table-column(prop="realCapacity", label="装机容量(W)", width="100")
template(slot-scope="{row}") {{row.realCapacity}}
</template>
<script>
export default {
data() {
return {
tableData: [],
passList: [],
rejectList: [],
firstColumnSelection: [], // 第一列选中项
secondColumnSelection: new Set(), // 使用Set来存储第二列选中项的索引,方便去重
customSelections: [], // 第二列自定义选中项
loading: false,
}
},
created() {
},
methods: {
getRowKey(row) {
return row.id // 假设每行数据都有唯一的 'id' 字段
},
handleSelectionChange (rows) {
this.firstColumnSelection = rows
rows.map(item => this.tableData.indexOf(item)).forEach(el => {
Array.from(this.secondColumnSelection).length && Array.from(this.secondColumnSelection).forEach(ele => {
if (el === ele) {
// 当选中第一列的时候,自动取消第二列对应行的选中状态
this.$set(this.tableData[el], 'isChecked', false)
this.secondColumnSelection.delete(ele)
this.customSelections = this.tableData.filter((row, index) => this.secondColumnSelection.has(index))
}
})
})
},
disableSelect(row) {
return row.loanAuditStatus === 'WAIT_AUDIT' || row.loanAuditStatus === 'WAIT_REVIEW'
},
disableRow(row) {
if (row.loanAuditStatus === 'WAIT_AUDIT' || row.loanAuditStatus === 'WAIT_REVIEW') {
return false
} else {
return true
}
},
handleSecondColumnCheckboxChange(index, row) {
// 切换第二列的选中状态
if (this.secondColumnSelection.has(index)) {
this.secondColumnSelection.delete(index)
} else {
this.secondColumnSelection.add(index)
}
// 当第二列选中项变化时,自动取消第一列对应行的选中状态
if (this.secondColumnSelection.has(index)) {
const rowIndex = this.tableData.findIndex(row => this.tableData.indexOf(row) === index)
this.$refs.multipleTable.toggleRowSelection(this.tableData[rowIndex], false)
}
this.customSelections = this.tableData.filter((row, index) => this.secondColumnSelection.has(index))
},
renderCustomHeader(h, { column, $index }) {
return h('span', '审核不通过')
}
}
}
</script>
<style lang="scss" scoped>
.filter-form::v-deep{
.el-input--mini{
width: 175px;
}
}
.table-container {
margin-top: 20px;
.el-pagination {
margin-top: 20px;
text-align: center;
}
}
</style>