element-ui封装dialog组件提供商品选择(支持单选/全选及已选择商品翻页保存)

父组件调用及需传入值说明

① parentSelectArr：此属性主要传入父组件表格已选择的商品数据
① handleSubmit：此事件在子组件点击确定按钮时触发，接收子组件传递过来的商品数据，然后把商品数据push到父组件的商品列表中
父组件显示的商品数据如上（调用的element-ui的table标签展示商品数据）

<add
        :visible.sync="showAddDialog"
        @onSubmit="handleSubmit"
        :parentSelectArr="tableData"
      ></add>

handleSubmit函数如下

// 子组件点击确认选择的商品触发父组件的此事件
    async handleSubmit(options, args) {
   
   
      this.showAddDialog = false;
      this.tableData.push(...options);
      this.formDate.gift.push(...args);
      this.num = this.tableData.length;
      //   formDate.gift 父组件中包含所有已选择商品ID的数组
      // tableData 父组件中包含所有已选择商品信息的数组
      // num 父组件中已选择商品数量
    },

子组件封装及说明

1. 代码结构部分

<template>
  <el-dialog
    v-bind="$attrs"
    title="选择商品"
    center
    :close-on-click-modal="false"
    width="60%"
    @close="$emit('update:visible', false)"
    @open="openDialog"
  >
    <!-- 选择栏 -->
    <div class="wrap">
      <div class="head-search">
        <input
          ref="check"
          type="checkbox"
          style="margin-left: 20px; vertical-align: middle;"
          @click="checkedAll()"
          :checked="checkIsAllSelect"
        /><span style="color: #409eff; margin-left: 5px;">全选当前页</span>

        <p>
          已选择<span style="color: red;">{
   
   {
   
    selectArr.length }}</span
          >个商品
        </p>
      </div>

      <!-- 内容区域 -->
      <div class="content">
      	<!-- element-ui的layout布局，一页展示12条数据，可根据自己需求调整 -->
        <el-row :gutter="10">
          <el-col
            :xs="24"
            :sm="12"
            :md="8"
            :lg="6"
            :xl="4"
            v-for="(item, index) in goodsList"
            :key="index"
          >
            <div class="grid-content bg-purple" style="margin-bottom: 40px;">
              <div class