<template><div><div class="customer-container"><el-row><el-form :inline="true" :model="tableList" class="demo-form-inline"><el-form-item label=""><el-input size="mini" style="width:140px;" v-model="tableList.pageName" placeholder="请输入页面名称"></el-input><el-input size="mini" style="width:140px;" v-model="tableList.shopName" placeholder="请输入店铺名称"></el-input><el-button size="small" type="primary" style="margin-left: 10px;"@click="getSearchPage(tableList.shopName,tableList.pageName)">查询</el-button></el-form-item><!--<el-button style="float:left;" type="primary" size="small" @click="handleChooseData">获取选中的内容</el-button>--></el-form></el-row></div><el-table ref="multipleTable" :data="gridDatas" border tooltip-effect="dark"  style="width: 100%;" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="pho" label="图片"><!– 图片的显示 –><template   slot-scope="scope"><img :src="scope.row.pho"  min-width="70" height="70" /></template></el-table-column><el-table-column prop="goodsName" label="商品名称"></el-table-column></el-table><el-pagination class="pagination" @size-change="SizeChangeDanpin" @current-change="handleCurrentChange" background layout="total, prev, pager, next , jumper" :current-page.sync="tableList.pageIndex" :total="totalCount"></el-pagination></div>
</template>

data() {return {selectedData:[],tableList: {goodsName: '',companyId: '00000001',pageIndex: 1,goodsId: ''},gridDatas: [],totalCount:1,idKey: 'goodsId', // 标识列表数据中每一行的唯一键的名称(需要按自己的数据改一下)multipleSelection: [],multipleSelectionAll:[],//所有选中的数据包含跨页数据}
},

methods: {setSelectRow() {if (!this.multipleSelectionAll || this.multipleSelectionAll.length <= 0) {return;}// 标识当前行的唯一键的名称let idKey = this.idKey;let selectAllIds = [];let that = this;this.multipleSelectionAll.forEach(row=>{selectAllIds.push(row[idKey]);})this.$refs.multipleTable.clearSelection();for(var i = 0; i < this.gridDatas.length; i++) {if (selectAllIds.indexOf(this.gridDatas[i][idKey]) >= 0) {// 设置选中，记住table组件需要使用ref="table"this.$refs.multipleTable.toggleRowSelection(this.gridDatas[i], true);}}} ,// 记忆选择核心方法changePageCoreRecordData () {// 标识当前行的唯一键的名称let idKey = this.idKey;let that = this;// 如果总记忆中还没有选择的数据，那么就直接取当前页选中的数据，不需要后面一系列计算if (this.multipleSelectionAll.length <= 0) {this.multipleSelectionAll = this.multipleSelection;return;}// 总选择里面的key集合let selectAllIds = [];this.multipleSelectionAll.forEach(row=>{selectAllIds.push(row[idKey]);})console.log(this.multipleSelectionAll)console.log(selectAllIds)let selectIds = []// 获取当前页选中的idthis.multipleSelection.forEach(row=>{selectIds.push(row[idKey]);// 如果总选择里面不包含当前页选中的数据，那么就加入到总选择集合里if (selectAllIds.indexOf(row[idKey]) < 0) {that.multipleSelectionAll.push(row);}})let noSelectIds = [];// 得到当前页没有选中的idthis.gridDatas.forEach(row=>{if (selectIds.indexOf(row[idKey]) < 0) {noSelectIds.push(row[idKey]);}})noSelectIds.forEach(id=>{if (selectAllIds.indexOf(id) >= 0) {for(let i = 0; i< that.multipleSelectionAll.length; i ++) {if (that.multipleSelectionAll[i][idKey] == id) {// 如果总选择中有未被选中的，那么就删除这条that.multipleSelectionAll.splice(i, 1);break;}}}})},//点击商品名称页handleCurrentChange(val) {this.changePageCoreRecordData();this.tableList.pageIndex=val;this.getDatas();},// 改变单品表格每页数目SizeChangeDanpin(val) {this.changePageCoreRecordData();console.log(`每页 ${val} 条`);},getDatas(){WxHomeGoodOn(this.tableList).then((data) => {this.loading = false;if(data.code === 1){if(data !==''){this.loading = false;this.gridDatas = data.data;this.totalCount = data.pageInfo.totalCount;setTimeout(()=>{this.setSelectRow();}, 200)}}}).catch(message => {console.log('"请求失败"')this.loading = false;})},handleSelectionChange(val) {this.multipleSelection = val;},// 得到选中的所有数据getAllSelectionData() {// 再执行一次记忆勾选数据匹配，目的是为了在当前页操作勾选后直接获取选中数据this.changePageCoreRecordData();console.log(this.multipleSelectionAll)}},mounted(){this.$nextTick(function () {// 初始化渲染this.tableList.pageIndex = 1this.getDatas()})}