翻页后选择
再返回第一页
查询后仍然记忆所选
组件代码
<template>
<div>
<searchBox>
<el-form :model="queryForm" label-width="80px">
<el-row :gutter="5">
<el-col :span="8">
<el-form-item label="厨道名称">
<el-input v-model="queryForm.kitchenName" @keyup.enter.native="query(1)" placeholder="请输入" size="medium"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="厨道编号">
<el-input v-model="queryForm.kitchenCode" @keyup.enter.native="query(1)" placeholder="请输入" size="medium"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-button-group slot="button">
<el-button type="primary" size="medium" icon="el-icon-search" @click="query(1)">查询</el-button>
<el-button type="" size="medium" icon="el-icon-refresh" @click="reset">重置</el-button>
</el-button-group>
</searchBox>
<!-- 厨道列表 -->
<el-table @select="select" @select-all="selectAll" :max-height="maxheight" border ref="dataTable" v-loading="tableLoading" :element-loading-text="loadingText" :data="tableData" style="width: 100%" size="mini">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="厨道名称" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.kitchenName }}</span>
</template>
</el-table-column>
<el-table-column label="厨道编号" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.kitchenCode }}</span>
</template>
</el-table-column>
<el-table-column label="当前状态" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.kitchenStatus | kitchenStatus}}</span>
</template>
</el-table-column>
</el-table>
<div class="page-pag">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="page" :page-sizes="[20, 50, 100]" :page-size="queryForm.size" layout="total, sizes, ->, prev, pager, next" :total="total">
</el-pagination>
<!--prev-text="上一页" next-text="下一页" -->
</div>
</div>
</template>
<script>
import kitchenApi from '@/API/item/kitchen'
export default {
props: {
taskData: Object,
/*
*从父组件传过来的值,最后也在父组件进行最后提交, 是这个样子:{ kitchen: [] }
*/
brandCode: String
},
data() {
return {
queryForm: {
page: 0,
size: 20
},
total: 0,
page: 1,
tableData: [],
selectedRow: [],
tableLoading: false,
loadingText: '数据正在加载中请稍后...',
maxheight: document.documentElement.clientHeight - 240
}
},
created() {
this.query(1)
},
methods: {
// 查询厨道
query(page) {
this.tableLoading = true
this.queryForm.page = page - 1
this.queryForm.brandCode = this.brandCode
kitchenApi
.query(this.queryForm)
.then(res => {
this.tableData = res.content
if (this.taskData.kitchen.length) {
this.toggleSelection(this.taskData.kitchen)
}
this.tableLoading = false
this.total = res.totalElements
})
.catch(err => {
console.log(err)
this.tableLoading = false
})
},
// 选中table已有数据
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$nextTick(() => {
var checked = this.tableData.find(
tableRow => tableRow.kitchenCode === row.kitchenCode
)
this.$refs.dataTable.toggleRowSelection(checked)
})
})
} else {
this.$refs.dataTable.clearSelection()
}
},
// 表格单选事件
select(selection, row) {
/* 此处有一个神奇的bug,
* 因为翻页点选后selection会出现为undefined的元素,
* 我对他进行了筛除,
* 但愿日后有人见到这段代码可以给出更为优秀的解决方式
*/
let allRows = selection.filter(item => !!item)
// 根据表格单选事件确定取消是取消了哪一行
if (allRows.find(item => item.kitchenCode === row.kitchenCode)) {
// 选中新增一行
this.addRows([row])
} else {
// 取消删除一行
this.removeRows([row])
}
console.log(this.taskData.kitchen)
},
// 表格全选事件
selectAll(selection) {
// 如果有则是全选否则就是全取消
alert(selection.length > 1)
if (selection.length > 1) {
this.addRows(this.tableData)
} else {
this.removeRows(this.tableData)
}
console.log(this.taskData.kitchen)
},
// 添加选中行
addRows(rows) {
for (let key of rows) {
// 如果选中的数据中没有这条就添加进去
if (
!this.taskData.kitchen.find(
item => item.kitchenCode === key.kitchenCode
)
) {
this.taskData.kitchen.push(key)
}
}
},
// 取消选中行
removeRows(rows) {
if (this.taskData.kitchen.length > 0) {
for (let row of rows) {
this.taskData.kitchen = this.taskData.kitchen.filter(item => item.kitchenCode !== row.kitchenCode)
}
}
},
// 选择单页展示多少条
handleSizeChange(val) {
this.queryForm.size = val
this.tableLoading = true
this.query(this.page)
},
// 选择展示第几页
handleCurrentChange(val) {
this.page = val
this.tableLoading = true
this.query(val)
},
// 重置
reset() {
this.queryForm.page = 1
this.queryForm.size = 20
this.queryForm.kitchenName = null
this.queryForm.kitchenCode = null
this.taskData.kitchen = []
this.query(1)
}
}
}
</script>