默认选中,在第二页选中,返回第一页也能看见

这种效果

 

利用set改变ischecked的值实现默认选中

this.spuList.forEach(v => {
            let num = this.selectedItem.findIndex(i => i.id === v. id);
            if(num > -1) {
              this.$set(v, 'isChecked', true);
            }else {
              this.$set(v, 'isChecked', false);
            }
          })     

findIndex

findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

findIndex() 方法为数组中的每个元素都调用一次函数执行：

• 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
• 如果没有符合条件的元素返回 -1

注意: findIndex() 对于空数组，函数是不会执行的。

注意: findIndex() 并没有改变数组的原始值。

语法

array.findIndex(function(currentValue, index, arr), thisValue)

例子

//返回符合大于输入框中数字的数组索引：
var ages = [4, 12, 16, 20];
 
function checkAdult(age) {
    return age >= document.getElementById("ageToCheck").value;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
}

完整代码,非常多,基本上应该能看懂

//默认选中完整例子

<template>
  <el-dialog
    title="选择商品"
    :visible.sync="dialogVisible"
    width="85%"
    append-to-body
    :close-on-click-modal="false"
    :before-close="handleClose">
    <div class="dialog-inner" v-loading="loading">
      <!-- <el-button type="primary" @click="selectType" v-if="tableData !== []">选择业态和商户</el-button> -->
      <el-button type="primary" @click="selectAll" >选择商户</el-button>
      {{couponId}}
      <div class="data-box flex-start-center padding-ver-sm" >
        <div class="text" style="margin-left: 20px;" >已选择商品：{{selectedItem1.length || 0}}</div>
      </div>
      <div class="spu-list">
         <p class="allCheck">
          <el-checkbox v-model="isAllChecked1" :indeterminate="isIndeterminate1" class="check"></el-checkbox>
          <span class="marks"  @click="allCheckedChange1"></span>
         </p>   
          <el-table style="width: 100%;"
            ref="multipleTable"
            :data="newSelect">
             <el-table-column align="center" width="100">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.isChecked1" @change="selectChecked1(scope.row)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="pluName" width="446" ></el-table-column>
            <el-table-column label="商品编码" prop="pluCode" width="446"></el-table-column>
            <el-table-column label="商户" prop="gname" width="446" show-overflow-tooltip>
            </el-table-column>
            </el-table>
      </div>
      <div class="padding-ver-sm flex-end-center" v-if="pages.totalCount">
       <el-pagination   @current-change="handleCurrentChange"
                       :current-page.sync="pages.pageNo" :page-size="pages.pageSize"
                       layout="total, prev, pager, next" :total="pages.totalCount">
        </el-pagination>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="confirmHide">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>

    <!-- 选择商户弹窗 -->
    <el-dialog
      :visible.sync="selectMerchantDialog"
      width="50%"
      title="选择商户"
      class="allLoading"
      append-to-body
      :destroy-on-close="true"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      center>
       <div class="selectOne">
         <span>选择业态:</span>
         <el-select v-model="value1" @change = "getValue1" filterable placeholder="请选择">
          <el-option
            v-for="item in shopAlldata"
            :key="item.cateid"
            :label="item.catename"
            :value="item.cateid">
          </el-option>
        </el-select>
      </div>
       <div class="selectTwo">
        <span>选择商户:</span>
         <el-select v-model="value" @change = "getValue" filterable placeholder="请选择">
          <el-option
            v-for="item in shopdata"
            :key="item.gid"
            :label="item.gname"
            :value="item.gid">
          </el-option>
        </el-select>
      </div>

       <div class="spu-list">
         <p class="allCheck">
          <el-checkbox v-model="isAllChecked" :indeterminate="isIndeterminate" class="check"></el-checkbox>
          <span class="marks"  @click="allCheckedChange"></span>
         </p>   
          <el-table style="width: 100%;"
            ref="multipleTable"
            :data="tableData">
            <el-table-column align="center" width="100">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.isChecked" @change="selectChecked(scope.row)"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="pluName" width="446" ></el-table-column>
            <el-table-column label="商品编码" prop="pluCode" width="446"></el-table-column>
            <el-table-column label="商户" prop="gname" width="446" show-overflow-tooltip>
            </el-table-column>
            </el-table>
             <div class="padding-ver-sm flex-end-center" v-if="pages1.totalCount">
       <el-pagination  @current-change="handleCurrentChange1"
                       :current-page.sync="pages1.pageNo" :page-size="pages1.pageSize"
                       layout="total, prev, pager, next" :total="pages1.totalCount">
        </el-pagination>
      </div>
      </div>
        <div slot="footer" class="dialog-footer" style="margin-left:200px">
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="onSubmitGoods">确 定</el-button>
    </div>
    </el-dialog>

  </el-dialog>
</template>

<script type="text/ecmascript-6">
import { mapGetters } from 'vuex'
import SpuGroup from './spuGroup.vue'
import OverlapSkuDialog from './overlapSkuDialog.vue'
export default {
    watch: {
   filterText(val) {
        this.$refs.tree.filter(val);
      },
      //第二个弹窗
    indeter() {
      return !this.isAllChecked && this.tableData.some(v => v.isChecked);
    },
      //第一个弹窗
      indeter1() {
      return !this.isAllChecked1 && this.newSelect.some(v => v.isChecked1);
    },
    'allSelect':{
      handler(data){
        if(this.pageStates === "edit"){
          this.newSelect = data.data
          this.selectedItem1 = data.data
           this.selectedItem1.forEach(v => {
            let num = this.newSelect.findIndex(i => i.pluId === v. pluId);
            if(num > -1) {
              this.$set(v, 'isChecked1', true);
            }else {
              this.$set(v, 'isChecked1', false);
            }
          })    
          this.pages.totalCount = data.page.totalCount
        }
      }
    }
    
   

    },
  name: 'goodsPickers',
  components: {
    SpuGroup,
    OverlapSkuDialog
  },
  props: {
    pageStates:{
      type:String,  // list列表 add新增 edit编辑
      default:'add'
    },
    allSelect: {
    type: Object,
    default () {
      return {}
    }
  }

  },
  data () {
    return {
        cateId:"",//业态id
        gids:'', //商铺id
        value1:'', //业态选择
        value:'',  //商户选择
        isChecked:false, //第二个弹窗
        isChecked1:false, //第一个弹窗
        tableData: [],
        filterText: '',
        shopdata: [],//商户
        shopAlldata:[], //业态
        newSelect:[],//第一个弹窗商品数据
        newSelect1:[], //第一个弹窗发送数据
        shopProps: {
          children: 'children',
          label: 'gname'
        },
      selectMerchantDialog:false,//选择商户弹窗
      selectTypeDialog:false, //选择业态弹窗
      loading:false,
      dialogVisible: false,
      pages:{
        pageNo: 1,
        pageSize: 2,
        totalCount:'',
        pages:''
      },
       pages1:{
        pageNo: 1,
        pageSize: 2,
        totalCount:'',
        pages:''
      },
      multipleSelection: [], //选择商户数据
      selectedItem1: [], //商户数据赋值给新数组
      selectedItem1:[], //默认全部勾选,第一个弹窗商品数据
    }
  },
  computed: {
    ...mapGetters([
      'loginInfo'
    ]),
     isPageCheckedAll () {
      return this.pageCheckedSpuCount > 0 && this.pageCheckedSpuCount === this.tableData.length;
    }, 
    pageCheckedSpuCount () {
      const list = this.tableData.filter(spu => spu.isChecked);
      return list ? list.length : 0;
    },  
    isIndeterminate () {
      return this.pageCheckedSpuCount > 0 && this.pageCheckedSpuCount < this.tableData.length;
    },  
    isAllChecked() {
      return this.tableData && this.tableData.every(v => v.isChecked);
    },
    

     isPageCheckedAll1 () {
      return this.pageCheckedSpuCount1 > 0 && this.pageCheckedSpuCount1 === this.newSelect.length;
    }, 
    pageCheckedSpuCount1 () {
      const list = this.newSelect.filter(spu => spu.isChecked1);
      return list ? list.length : 0;
    },  
    isIndeterminate1 () {
      return this.pageCheckedSpuCount1 > 0 && this.pageCheckedSpuCount1 < this.newSelect.length;
    },  
    isAllChecked1() {
      return this.newSelect && this.newSelect.every(v => v.isChecked1);
    },

  },
  created () {

  },
  mounted(){

  },
  updated() {
   
  },
  methods: {
    childClick() {  //已选中数量 
      this.$emit('numLen', this.selectedItem1.length)
    },
    //获取商户选择器选中值 
    getValue(val){
      this.gids = val
      this.getproductData()
    },
    getValue1(val){ //获取业态id
      this.cateId = val
        this.getproductData()
    },
    //选择框change
    selectChecked(row){
      if(row.isChecked) {
        this.selectedItem1.push(row);
      }else {
        let num = this.selectedItem1.findIndex(v => v.pluId === row.pluId);
        if(num > -1) {
          this.selectedItem1.splice(num, 1);
        }else {
          this.selectedItem1.push(row);
        }    
      }   
    },
    //全选
    allCheckedChange() {
      if(this.isAllChecked) {
        this.tableData.forEach(v => {
          this.$set(v, 'isChecked', false);
          let num = this.selectedItem1.findIndex(row => v.pluId === row.pluId);
          if(num > -1) this.selectedItem1.splice(num, 1);
        })
      }else {
        this.tableData.forEach(v => {
          this.$set(v, 'isChecked', true);
          let num = this.selectedItem1.findIndex(row => v.pluId === row.pluId);
          if(num < 0) this.selectedItem1.push(v)
        })      
      }      
    },
     //选择框change 第一个弹窗
    selectChecked1(row){
      if(row.isChecked1) {
        this.selectedItem1.push(row);
      }else {
        let num = this.selectedItem1.findIndex(v => v.pluId === row.pluId);
        if(num > -1) {
          this.selectedItem1.splice(num, 1);
        }else {
          this.selectedItem1.push(row);
        }    
      }   
    },
    //第一个弹窗全选
    //全选
    allCheckedChange1() {
      if(this.isAllChecked1) {
        this.newSelect.forEach(v => {
          this.$set(v, 'isChecked1', false);
          let num = this.selectedItem1.findIndex(row => v.pluId === row.pluId);
          if(num > -1) this.selectedItem1.splice(num, 1);
        })
      }else {
        this.newSelect.forEach(v => {
          this.$set(v, 'isChecked1', true);
          let num = this.selectedItem1.findIndex(row => v.pluId === row.pluId);
          if(num < 0) this.selectedItem1.push(v)
        })      
      }      
    },
    //控制表格内容居中
    thStyleFun(){
     return 'text-align:center'
    },
    cellStyleFun(){
     return 'text-align:center'
    },
    //点击选择商户
    selectAll(){
      this.selectMerchantDialog=true
      this.selectShop()
      this.selectType()
    },
    //点击选择商户,获取商户列表
    selectShop(){
      // let param = {
      //   page:{pageNo:1,pageSize:20000}
      // } 
      this.$apis.queryChooseShop().then(res => {
        if(res.flag) {
          this.shopdata = res.data;
        }else {
          this.$message({message: res.data, type: 'warning'});
        }
      })
      },
      //获取业态商户
      selectType(){
      this.$apis.queryTypeProduct().then(res => {
        if(res.flag) {
          this.shopAlldata = res.data;
        }else {
          this.$message({message: res.data, type: 'warning'});
        }
      })
      },
    //获取选择商品之后已选情况下的数据
    getproductData(){
      let pageNo = this.pages1.pageNo
      let pageSize = this.pages1.pageSize
      let cateId = this.cateId
      let param = { 
        couponParam:{
           cateId:"13",
           branId:'', //门店id
            //  gid:this.gids, //商铺id
          gid:'55',
          // pluCode:'', //商品编码
             },
        page:{pageNo,pageSize}
      }
      this.$apis.queryChooseProduct(param).then(res =>{
        if(res.flag) {
          this.tableData = res.data;
          this.pages1.totalCount = res.page.totalCount;
          this.tableData.forEach(v => {//上面放的是所有的
            let num = this.selectedItem1.findIndex(i => i.pluId === v. pluId);
            //下面放的是选中的
            if(num > -1) {
              this.$set(v, 'isChecked', true);
            }else {
              this.$set(v, 'isChecked', false);
            }
          })      

        }else {
          this.$message({message: res.data, type: 'warning'});
        }

      })
    },
    // 关闭前
    handleClose() {
      this.$confirm('此操作将不会保存编辑的内容，确认继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.dialogVisible = false;
      }).catch(() => {
        
      });
    },
    closeDialog(){
    this.selectMerchantDialog=false
    },
    // 确认关闭
    confirmHide () {
      this.$confirm('此操作将不会保存编辑的内容，确认继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.hideDialog();
      }).catch(() => {});
    },
    // 关闭
    hideDialog () {
      this.dialogVisible = false;
      this.resetSearch();
      this.resetData();
    },
    // 打开
    showDialog () {
      this.dialogVisible = true;
    },
    // 分页
    handleCurrentChange(val) {
      this.pages.pageNo = val;
      this.getproductData()
    },
    handleCurrentChange1(val) {
      this.pages1.pageNo = val;
      this.getproductData()
    },
    //选择商品时的确定
    onSubmitGoods(){//提交已经选择的商品
    if(this.selectedItem1.length >0){
      this.newSelect =JSON.parse(JSON.stringify( this.selectedItem1))
      this.selectMerchantDialog=false
      } else {
        this.$message.warning('请至少选择一个商品');
      }
    },
    //选择完之后商品弹窗的确定
    onSubmit () {
      this.childClick()
      this.dialogVisible = false;
      this.newSelect1 =JSON.parse(JSON.stringify( this.selectedItem1))
      this.$emit('onsave', this.newSelect1)
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
  .th-header{
    background-color: #f5f5f5;
    border-bottom:1px solid #ededed;
    .checkbox{
      width: 50px;
    }
    .name{
      width: 230px;
    }
    .th{
      flex:1;
    }
  }
  .allCheck {
  position: relative;
  top: 35px;
  left: 44px;
}
.marks{
    top: 0px;
    z-index: 9999;
    position: absolute;
    width: 20px;
    height: 20px;
    display: block;
}
.selectOne{
  float: left;
  margin-right: 20px;
}
</style>