<template>
<el-dialog title="新增/编辑" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" :destroy-on-close="false" :close-on-click-modal="false">
<el-table :data="companyData" v-loading="companyLoading" height="300" ref="multipleTable" @select="handleSelectionChange" @select-all="handleAllChange" :row-key="(row)=>{ return row.companyId}">
<el-table-column label="全选" type="selection" width="55" :reserve-selection="true"></el-table-column>
<el-table-column prop="companyName" label="企业名称" />
</el-table>
<div class="pagination" style='text-align: right; margin-top: 10px'>
<element-pagination :page-size="pagination.size" :current-page="pagination.page" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
</div>
</el-dialog>
</template>
<script>
export default {
data () {
return {
dialogVisible: false,
companyData: [],
selectList: [],
companyLoading: false,
pagination: {
page: 1,
size: 20
},
total: 0,
}
},
methods: {
show (id) {
this.dialogVisible = true
this.getDetail()
},
// 获取详情
async getDetail () {
const res = await this.$http.get('/api/detail?id=1')
this.selectList = res.companyIdList
},
handleSizeChange (size) {
this.pagination.size = size
this.getList()
},
handleCurrentChange (page) {
this.pagination.page = page
this.getList()
},
// 获取数据
async getList () {
try {
this.companyLoading = true
const { page, size } = this.pagination
const params = {
url: '/api/search',
params: {
page: page - 1,
size,
like_companyName: this.value2
}
}
const { rows = [], total = 0 } = await this.$http(params)
this.companyLoading = false
this.companyData = rows
this.total = total
setTimeout(() => {
if (this.selectList.length > 0) {
this.echo(rows)
}
}, 10);
} catch (error) {
console.log(error)
} finally {
this.companyLoading = false
}
},
echo (data) {
let rows = []
data.forEach(item => {
this.selectList.forEach(item2 => {
if (item.companyId === item2) {
rows.push(item)
}
})
})
this.toggleSelection(rows)
},
// 在获取企业数据下调用
toggleSelection (rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row, true)
})
} else {
this.$refs.multipleTable.clearSelection()
}
},
// 选择企业， 打钩或者取消
handleSelectionChange (selecteds, row) {
// console.log(selecteds, row)
if (!this.selectList.includes(row.companyId)) {
// 回显数据里没有本条， 把这条加进来（选中）
this.selectList.push(row.companyId)
} else {
// 回显数据有本条，把这条数据删除（取消选中）
this.selectList.splice(this.selectList.indexOf(row.companyId), 1)
}
},
// 全选、取消全选
handleAllChange (selects) {
// console.log(selects)
if (selects.length > 0) {
selects.forEach(item => {
if (!this.selectList.includes(item.companyId)) {
this.selectList.push(item.companyId)
}
})
} else {
this.companyData.list.forEach(item => {
this.selectList.forEach((id, index) => {
if (item.companyId === id) {
this.selectList.splice(index, 1)
}
})
})
}
},
}
}
</script>
<style lang="scss" scoped>
</style>
近半年时间在接触vue写pc页面，文中内容即在实际的开发过程中遇到的实际问题。
在pc版的列表页面中，假设当前在列表的第一页，想要在当前页面选择几行数据，跳转到其他页面选择几行数据，选择后的数据页面展示为已勾选状态，经过跳转页面之后，数据选择状态依然存在，且可以将已选择的数据的id传到后端；即标题所述的实现多页多选、翻页回显问题 。示例图片如下：
下面第一个图为第一页选择的数据信息：
下图为跳转到第二页选择数据的截图：
想达到的最终效果是这两个页面不管怎么跳转，都能显示跳转之前的选中状态。
下面加粗字体是实现多页多选 翻页回显的必要设置，下面依次说明一下
<el-table size="small" :data="listData" ref="multipleTable" row-key="getRowKeys" @select="handleCheckBox" @select-all="handleSelectAll" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
<el-table-column align="center" type="selection" width="60"></el-table-column>
el-table 标签中设置信息解读：
el-table-column标签中设置的信息解读：
在export default 的data()中进行定义数组，只展示了需要添加的代码
export default {
data() {
return {
multipleSelection: [],在export defalt的method中编写下面函数方法：
//该方法是单选时的方法
handleCheckBox(rows, row) {
if (this.multipleSelection.find((item) => item == row.case_id)) {
//下面这个filter方法就是删除的方法
this.multipleSelection = this.multipleSelection.filter(
(item) => item != row.case_id
);
} else {
this.multipleSelection.push(row.case_id);
},
//该方法是当页全选的方法
handleSelectAll(rows) {
if (rows.length) {
rows.forEach((row) => {
if (!this.multipleSelection.find((item) => item == row.case_id)) {
this.multipleSelection.push(row.case_id);
}
});
} else {
this.listData.forEach((row) => {
this.multipleSelection = this.multipleSelection.filter(
(item) => item != row.case_id
);
});
}
},
//下面的方法是进行设置行标识key的方法
getRowKeys(row) {
return row.case_id
}
因为在实现分页的时候使用了分页组件，即每次翻页都会调用后端的list方法去查询这个页面的数据信息，所以回显的逻辑要方法每次调用后端数据的逻辑中，代码如下：
getdata(parameter) {
this.loading = true
/***
* 调用后端接口
*/
TestCaseList(parameter)
.then(res => {
this.loading = false
if (res.success == false) {
this.$message({
type: 'info',
message: res.msg
})
} else {
this.listData = res.data
// 分页赋值
this.pageparm.currentPage = this.formInline.page
this.pageparm.pageSize = this.formInline.limit
this.pageparm.total = res.count
//这里是回显的功能代码 当切换页面的时候 会重新调用list方法，在这个位置进行判断这个数据是否回显
this.$nextTick(()=>{
this.listData.forEach((item,index)=>{
if(this.multipleSelection.findIndex(v=>v == item.case_id) >= 0){
this.$refs.multipleTable.toggleRowSelection(
this.$refs.multipleTable.data[index],
true
);
}
})
console.log('这里是每次查询list接口之后的操作,看看是否回显');
console.log("multipleSelection=", this.multipleSelection);
})
}
})
.catch(err => {
this.loading = false
this.$message.error('菜单加载失败，请稍后再试！')
})
},
具体功能实现讲解：
this.$nextTick(()=>{
this.listData.forEach((item,index)=>{
if(this.multipleSelection.findIndex(v=>v == item.case_id) >= 0){
this.$refs.multipleTable.toggleRowSelection(
this.$refs.multipleTable.data[index],
true
);
}
})实现功能就是每次调用完后端的list接口，判断查出来的case_id是否有在multipleSelection数组中的，在数组中意味着要显示成已选中的状态，通过ref调用table数据 调用toggleRowSelection（）方法实现，即上面加粗部分代码；
以上几个步骤将如何实现的过程已完全描述，如有不懂可以交流哦
