1. ¿Los antecedentes de desarrollo y la razón por la que se pierde la operación seleccionada?
Vue+element ui desarrolla una tabla. Esta tabla tiene funciones como paginación y eliminación por lotes. La paginación de la tabla llama a la interfaz de back-end para realizar la paginación. Después de hacer clic en la página siguiente para llamar a la interfaz de interfaz para obtener datos, el DOM se vuelve a representar, por lo que conduce a lo anterior. ¡La operación de selección realizada en una página se ha ido!
Reproducir el problema:
1. ¡Haga clic en CheckBox para seleccionar los datos!
2. ¡Hacer clic en la página siguiente o hacer clic en la página anterior significa que se pierde la operación de selección de datos!
2. ¿El código realiza la eliminación por lotes de la tabla?
La clave para realizar la operación de selección de página de cambio de eliminación por lotes no se pierde:
@selection-change="selectionChange"
//当选择项发生变化时会触发该事件
:row-key="getRowKeys"
//行数据的 Key,能够拿到对应的选中的id并且返回出去
:reserve-selection="true"
//仅对table列有效，类型为 Boolean，为 true 则会在数据更新之后保留之前选中的数据（需指定 row-key）Método correspondiente:
selections:[]
//在export default里的data里声明一个变量
selectionChange: function (selections) {
this.selections = selections.map(row => row.id)
//将选中的数据存放在一个数组中
},
getRowKeys(row) {
return row.id;
//将id return出去
},Ubicación correspondiente:
La pantalla de resultados:
Operación de selección de la primera página:
La segunda página también está seleccionada:
Volver a la operación de selección de la primera página no se pierde:
1. A continuación se adjunta el código de la plantilla del caso completo.
<template>
<div>
<div>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-row>
<el-col :span="5">
<el-form-item label="审批人">
<el-input
v-model="formInline.user"
placeholder="审批人"
></el-input>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="活动区域">
<el-select v-model="formInline.region" placeholder="活动区域">
<el-option label="卫生间" value="1"></el-option>
<el-option label="操场" value="2"></el-option>
<el-option label="监狱单间" value="3"></el-option>
<el-option label="厨房" value="4"></el-option>
<el-option label="棋牌室" value="5"></el-option>
<el-option label="监控室" value="6"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="责任人">
<el-input
v-model="formInline.popr"
placeholder="责任人"
></el-input> </el-form-item
></el-col>
<el-col :span="5"
><el-form-item label="监察人">
<el-input
v-model="formInline.add"
placeholder="监察人"
></el-input> </el-form-item
></el-col>
</el-row>
</el-form>
<el-row>
<el-col :span="10" :offset="14">
<el-button icon="el-icon-search" type="primary">查询</el-button>
<el-button icon="el-icon-refresh" type="success">重置</el-button>
<el-button icon="el-icon-download" type="info">导出</el-button>
<el-button icon="el-icon-upload" type="warning">上传</el-button>
<el-button icon="el-icon-delete" type="danger" :disabled="this.tableAll.length===0" @click="handleBatchDelete()">批量删除</el-button>
</el-col>
</el-row>
</div>
<div>
<el-table
@selection-change="selectionChange"
:row-key="getRowKeys"
:v-loading="loading"
ref="multipleTable"
:data="tableData"
tooltip-effect="dark">
<el-table-column
:reserve-selection="true"
type="selection"
width="55">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{
{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
</div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pagenum"
:page-sizes="sizes"
:page-size="pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="totals"
>
</el-pagination>
</div>
</template>2. El código lógico del script.
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld,
},
data() {
return {
formInline: {
user: "",
region: "",
popr: "",
add: "",
},
tableAll: [
{
id:1,
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:2,
date: "2017",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:3,
date: "2018",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:4,
date: "201789",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:5,
date: "2017dada",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:6,
date: "201wfwfw7",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:7,
date: "201wgggdh7",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:8,
date: "201hfjgkuk7",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:9,
date: "2rjrjrj017",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:10,
date: "2kulil017",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:11,
date: "20jyjyjy17",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:12,
date: "20373717",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:13,
date: "2075773717",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:14,
date: "20737586987317",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:15,
date: "201ddd7",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:16,
date: "20qqq17",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:17,
date: "20eee17",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:18,
date: "20rrrr17",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
{
id:19,
date: "201ttt7",
name: "王",
address: "上海市普陀区金沙江路 1518 弄",
},
],
pagenum: 1,
sizes: [2, 5, 10, 20, 50],
totals: 0,
pagesize: 5,
tablepage: [],
tableData: [],
loading: false,
selections: [],
};
},
created() {
this.handleSizeChange();
},
methods: {
onSubmit() {
console.log("submit!");
},
handleSizeChange(val) {
if (val) {
this.pagesize = val;
this.loading = true;
this.pagenum = Math.ceil(this.tableAll / this.pagesize) || 1;
this.totals = this.tableAll.length;
for (let i = 0; i < this.pagenum; i++) {
// 这是筛选出来的对应的页数和条数的数据
this.tablepage[i] = this.tableAll.slice(
this.pagesize * i,
this.pagesize * (i + 1)
);
// console.log(this.tablepage[i]);
// 将对应的值赋值给页面展示的数组
this.tableData = this.tablepage[i];
}
// console.log(response.content.length);
// this.tableData = response.content;
this.loading = false;
} else {
this.loading = true;
this.pagenum = Math.ceil(this.tableAll / this.pagesize) || 1;
this.totals = this.tableAll.length;
for (let i = 0; i < this.pagenum; i++) {
// 这是筛选出来的对应的页数和条数的数据
this.tablepage[i] = this.tableAll.slice(
this.pagesize * i,
this.pagesize * (i + 1)
);
// console.log(this.tablepage[i]);
// 将对应的值赋值给页面展示的数组
this.tableData = this.tablepage[i];
}
// console.log(response.content.length);
// this.tableData = response.content;
this.loading = false;
}
},
handleCurrentChange(val) {
this.pagenum = val;
for (let i = 0; i < this.pagenum; i++) {
// 通过页数进行遍历
this.tablepage[i] = this.tableAll.slice(
// 这是筛选出来的对应的页数和条数的数据
this.pagesize * i,
this.pagesize * (i + 1)
);
// console.log(this.tablepage[i]);
// 将对应的值赋值给页面展示的数组
this.tableData = this.tablepage[i];
}
},
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleBatchDelete: function () {
// let ids = this.selectionss.map(row => row.id).toString()
this.$confirm('确认删除选中记录吗？', '提示', {
type: 'warning'
}).then(() => {
let params = this.selections
console.log(params);
// let idArray = (ids+'').split(',')
// for(var i=0; i<idArray.length; i++) {
// params.push({'id':idArray[i]})
// }
this.loading = true
BookDataManagement.del(params).then((response) => {
this.$message({message: '删除成功', type: 'success'})
this.$refs.table.clearSelection()
// 删除成功后清除全选操作
this.queryDataByCondition()
})
this.loading = false
}).catch(() => {
})
},
getRowKeys(row) {
return row.id;
},
selectionChange: function (selections) {
this.selections = selections.map(row => row.id)
},
},
};
</script>