element-ui的table元件-checkbox選中分頁記憶-邏輯修改成 選中row的id集合來記錄選中了那些資料 (修訂後完整版)
阿新 • • 發佈:2018-11-26
<template> <div style="margin-bottom: 20px;"> <el-dialog :title="edit_main_title" append-to-body v-dialogDrag :visible.sync="edit_flag" @open="handleOpenConfig" :before-close="handleClose"> <el-row type="flex" justify="space-between" style="padding: 10px 0"> <el-col> <el-input style="width: 180px" v-model="page.condition.name" @keyup.enter.native="search" placeholder="發運點"></el-input> <el-button type="primary" @click="search">查詢</el-button> </el-col> <el-col style="text-align: right"> </el-col> </el-row> <el-table key="1" ref="houseMultipleTable" :data="table_data" v-loading="loadingShow" element-loading-text="載入中" border fit highlight-current-row style="width: 99%" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column align="center" label="序號" width=""> <template slot-scope="scope"> <span>{{scope.$index+1}}</span> </template> </el-table-column> <el-table-column width="200" align="center" label="編碼"> <template slot-scope="scope"> <span>{{scope.row.code}}</span> </template> </el-table-column> <el-table-column width="140" align="center" label="名稱"> <template slot-scope="scope"> <span>{{scope.row.name}}</span> </template> </el-table-column> <el-table-column width="120" align="center" label="所在省份"> <template slot-scope="scope"> <span>{{scope.row.province}}</span> </template> </el-table-column> <el-table-column width="120" align="center" label="所在城市"> <template slot-scope="scope"> <span>{{scope.row.city}}</span> </template> </el-table-column> <el-table-column width="120" align="center" label="所在區縣"> <template slot-scope="scope"> <span>{{scope.row.county}}</span> </template> </el-table-column> </el-table> <!-- 分頁 --> <el-pagination style="margin-top: 8px" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current" :page-sizes="[10, 20, 30, 40]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper" :total="page.total"> </el-pagination> <el-row type="flex" justify="end"> <el-button type="primary" @click="handleClose">取消</el-button> <el-button type="primary" @click="confirmClick">確定</el-button> </el-row> <div style="height:20px"></div> </el-dialog> </div> </template> <script type="text/javascript"> import * as SysUserApi from '@/api/sys/sysuser' export default { name: '', components: { }, props: ['edit_flag', 'edit_main_title', 'edit_select_row', 'edit_params'], data() { return { title_data: {}, loadingShow: false, selectRow: [], selectRowAll: [], selectAllIds: [], // 當前角色擁有的許可權 idKey: 'id', // 標識列表資料中每一行的唯一鍵的名稱 selectIds: [], page: { current: 1, size: 10, total: 0, condition: { name: '' } }, haveReq: false, table_data: [] } }, created() { }, methods: { handleOpenConfig(data) { this.table_data = [] this.page = { current: 1, size: 10, total: 0, condition: { name: '' } } this.haveReq = false this.selectAllIds = [] this.selectRowAll = [] this.getList() }, getList() { this.loadingShow = true SysUserApi.allUsableStoreHouse(this.page).then(res => { this.loadingShow = false const t = res.data this.table_data = t.records this.page.current = t.current this.page.size = t.size this.page.total = t.total if (!this.haveReq) { console.log('---getOwnerIds()----') this.getOwnerIds() // 第一次向後臺請求角色擁有的許可權 } else { setTimeout(() => { this.setSelectRow() // 選中狀態勾選 }, 50) } }).catch(() => { this.loadingShow = false }) }, // 表格改變時 handleSelectionChange(val) { setTimeout(() => { this.changePageCoreRecordData(val) }, 50) }, // 初始回填選中狀態 setSelectRow() { if (!this.selectAllIds || this.selectAllIds.length <= 0) { return } // 標識當前行的唯一鍵的名稱 const idKey = this.idKey this.$refs.houseMultipleTable.clearSelection() for (let i = 0; i < this.table_data.length; i++) { if (this.selectAllIds.indexOf(this.table_data[i][idKey]) >= 0) { // 設定選中,記住table元件需要使用ref="table" this.$refs.houseMultipleTable.toggleRowSelection(this.table_data[i], true) // // 如果總選擇裡面不包含當前頁選中的資料,那麼就加入到總選擇集合裡 // if (!this.hasPermissions(this.selectRowAll, this.table_data[i], idKey)) { // this.selectRowAll.push(this.table_data[i]) // } } } console.log('回填this.selectRowAll', this.selectRowAll) }, // 判斷數集內是否有該物件,有則返回 true,無則返回false hasPermissions(selectRowAll, item, key) { if (item && item[key]) { return selectRowAll.some(row => item[key] === row[key]) } else { return true } }, // 表格改變修改選中資料記錄 changePageCoreRecordData(val) { console.log('changePageCoreRecordData()----') console.log('初that.selectAllIds', this.selectAllIds) console.log('初this.selectRowAll', this.selectRowAll) console.log('初val', val) // 標識當前行的唯一鍵的名稱 const idKey = this.idKey const that = this if (val.length < 0) { return } const selectIds = [] // 獲取當前頁選中的id val.forEach(row => { selectIds.push(row[idKey]) }) const init_arr = this.selectAllIds.concat(selectIds) // 數組合並 this.selectAllIds = Array.from(new Set(init_arr)) // 陣列去重 const noSelectIds = [] // 得到當前頁沒有選中的id this.table_data.forEach(row => { if (selectIds.indexOf(row[idKey]) < 0) { noSelectIds.push(row[idKey]) } }) noSelectIds.forEach(id => { if (this.selectAllIds.indexOf(id) >= 0) { for (let i = 0; i < that.selectAllIds.length; i++) { if (that.selectAllIds[i] === id) { // 如果總選擇中有未被選中的,那麼就刪除這條 that.selectAllIds.splice(i, 1) break } } } }) }, // 請求初始角色擁有的許可權(選中狀態) getOwnerIds() { SysUserApi.ownHouse(this.edit_select_row.id).then(response => { this.loadingShow = false this.selectAllIds = response.data this.haveReq = true this.setSelectRow() }).catch(() => { this.haveReq = false this.loadingShow = false }) }, // 查詢 search() { this.page.current = 1 this.page.size = 10 this.getList() }, handleSizeChange(val) { this.page.size = val this.page.current = 1 this.getList() }, handleCurrentChange(val) { this.page.current = val this.getList() }, // 確認 confirmClick() { if (this.selectAllIds && this.selectAllIds.length > 0) { // this.checkOneSelect(this.selectRowAll) // const ids = [] // this.selectRowAll.forEach(function(item, index, array) { // ids.push(item.id) // }) // console.log('提交的ids', ids) SysUserApi.grantHouse(this.edit_select_row.id, this.selectAllIds).then(response => { if (response.code === 0) { this.$notify({ title: '成功', message: '倉庫分配成功', type: 'success', duration: 2000 }) this.$refs.houseMultipleTable.clearSelection() } else { this.$notify({ title: '失敗', message: response.message, type: 'fail', duration: 2000 }) } this.$emit('edit-close', false) }) } else { this.$message({ message: '未選擇', type: 'warning', duration: 2000 }) } }, // 檢查是否選擇單條 checkOneSelect(data) { const l = data.length if (l === 0) { this.$message({ message: '未選擇', type: 'warning', duration: 2000 }) return false } // if (l > 1) { // this.$message({ // message: ' 不可多選, 請選擇單條!', // type: 'warning', // duration: 2000 // }) // return false // } return true }, handleClose() { this.$emit('edit-close', false) } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> </style>