image.png
翻頁后選擇
image.png
再返回第一頁
image.png
查詢后仍然記憶所選
image.png
組件代碼
<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="請(qǐng)輸入" size="medium"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="廚道編號(hào)">
<el-input v-model="queryForm.kitchenCode" @keyup.enter.native="query(1)" placeholder="請(qǐng)輸入" 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="廚道編號(hào)" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{ scope.row.kitchenCode }}</span>
</template>
</el-table-column>
<el-table-column label="當(dāng)前狀態(tài)" 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,
/*
*從父組件傳過來的值鉴腻，最后也在父組件進(jìn)行最后提交, 是這個(gè)樣子：{ kitchen: [] }
*/
brandCode: String
},
data() {
return {
queryForm: {
page: 0,
size: 20
},
total: 0,
page: 1,
tableData: [],
selectedRow: [],
tableLoading: false,
loadingText: '數(shù)據(jù)正在加載中請(qǐng)稍后...',
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已有數(shù)據(jù)
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) {
/* 此處有一個(gè)神奇的bug董济，
* 因?yàn)榉擖c(diǎn)選后selection會(huì)出現(xiàn)為undefined的元素抱婉，
* 我對(duì)他進(jìn)行了篩除，
* 但愿日后有人見到這段代碼可以給出更為優(yōu)秀的解決方式
*/
let allRows = selection.filter(item => !!item)
// 根據(jù)表格單選事件確定取消是取消了哪一行
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) {
// 如果選中的數(shù)據(jù)中沒有這條就添加進(jìn)去
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>
