1.template部分

• 為table組件添加ref=‘table’
• 綁定數據源 :data=‘list’
• 添加select和select-all事件（事件處理函數為handleSelect）

<template><div><el-table ref='table' :data="list" max-height="600"@select="handleSelect" @select-all='handleSelect'><el-table-column fixed="left" type="selection" width="55" align="center" /><el-table-column label="商品名稱" align="center" prop="name" min-width="200" /><el-table-column label="商品條碼" align="center" prop="id" min-width="180" /><el-table-column label="商品單位" align="center" prop="unit" min-width="180" /></el-table></div>
</template>

2.js部分

• 在data函數中定義全局選中數據的變量allIds
• 在data函數中定義數據源的變量list

<script>export default {data() {return {allIds: [],//當前選中數據的id數組list: [], //表格數據源}}}
</script>

• 請求列表數據，并根據allIds判斷當前列表中是否有選中的數據，如果有則默認選中

<script>export default {data() {return {allIds: [],//當前選中的數據list: [], //表格數據源}},created() {this.getList()},methods: {getList() {axios.get('xxxxx').then(res => { //模擬數據請求this.list = response.data.rows; //數據源//循環數據列表，判斷當前數據的id是否存在于allIds中，如果存在則默認選中this.$nextTick(() => {this.list.map((item) => {if(this.allIds.includes(item.id)) {this.$refs.table.toggleRowSelection(item,true)}})})})}}}
</script>

• handleSelect事件函數的實現
  監聽單選、全選事件
  判斷allIds數據里面是否包含當前分頁的數據，如果包含，則將當前頁面數據的id從allIds 里刪除
  然后將當前頁選中的數據重新push到allIds數組里

<script>export default {methods: {// 跨頁選擇handleSelect(selection) {let allIds = [...this.allIds];let delIds = this.list.map(item => item.id);for(let i = 0; i < this.allIds.length; i++) {let id = allIds[i];if(delIds.includes(id)) {allIds.splice(i,1);i--;}}selection.map(item => {if(!allIds.includes(item.id)) {allIds.push(item.id)}})this.allIds = [...allIds]}}}
</script>

3.全部代碼

<template><div><el-table ref='table' :data="list" max-height="600"@select="handleSelect" @select-all='handleSelect'><el-table-column fixed="left" type="selection" width="55" align="center" /><el-table-column label="商品名稱" align="center" prop="name" min-width="200" /><el-table-column label="商品條碼" align="center" prop="id" min-width="180" /><el-table-column label="商品單位" align="center" prop="unit" min-width="180" /></el-table></div>
</template><script>export default {data() {return {allIds: [],//當前選中的數據list: [], //表格數據源}},created() {this.getList()},methods: {getList() {axios.get('xxxxx').then(res => { //模擬數據請求this.list = response.data.rows; //數據源//循環數據列表，判斷當前數據的id是否存在于allIds中，如果存在則默認選中this.$nextTick(() => {this.list.map((item) => {if(this.allIds.includes(item.id)) {this.$refs.table.toggleRowSelection(item,true)}})})})},// 跨頁選擇handleSelect(selection) {let allIds = [...this.allIds];let delIds = this.list.map(item => item.id);for(let i = 0; i < this.allIds.length; i++) {let id = allIds[i];if(delIds.includes(id)) {allIds.splice(i,1);i--;}}selection.map(item => {if(!allIds.includes(item.id)) {allIds.push(item.id)}})this.allIds = [...allIds]}}}
</script>