element-ui表格跨页选择数据

本文主要是介绍element-ui表格跨页选择数据，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>

这篇关于element-ui表格跨页选择数据的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---