最近在开发一个性能：有一个赠品弹层，外面能够抉择赠品，点击确定，可将选中的赠品展现在页面上。页面上的赠品列表有删除按钮，能够删除对应的数据，并且赠品弹层对应的那条数据勾销选中。
上面是代码:

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>element-ui开发: 选中赠品弹层中的数据并展现在页面上，弹层展现选中状态</title>  <!--引入 element-ui 的款式，-->  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">  <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>  <!-- 引入element 的组件库-->  <script src="https://unpkg.com/element-ui/lib/index.js"></script>  <style>    * {      margin: 0;      padding: 0;    }  </style></head><body>  <div id="app">    <el-button type="primary" @click="addGiftFun">增加赠品</el-button>    <div v-if="livGiftList.length > 0">      <el-table :data="livGiftList" border style="width: 500px">        <el-table-column label="赠品名称" align="center" min-width="80">          <template slot-scope="{ row }">            <span>{{ row.name }}</span>          </template>        </el-table-column>        <el-table-column label="操作" align="center" min-width="60">          <template slot-scope="scope">            <el-button @click="delGiftFun(scope.$index, livGiftList)">删除</el-button>          </template>        </el-table-column>      </el-table>    </div>    <el-dialog title="请抉择赠品" :close-on-click-modal="false" :visible.sync="isShow" width="500px">      <el-table :data="giftProdctList" border style="width: 500px">        <el-table-column label="赠品名称" align="center" min-width="80">          <template slot-scope="{ row }">            <span>{{ row.name }}</span>          </template>        </el-table-column>        <el-table-column label="赠品价格" align="center" min-width="80">          <template slot-scope="{ row }">            <span>{{ row.price }}</span>          </template>        </el-table-column>        <el-table-column label="操作" align="center" min-width="60">          <template slot-scope="{ row }">            <el-checkbox v-model="row.checked">{{              row.checked ? "已抉择" : "抉择"              }}</el-checkbox>          </template>        </el-table-column>      </el-table>      <div slot="footer" class="footer">        <el-button class="cancel-style" size="small" @click="isShow = false">取 消</el-button>        <el-button type="primary" @click="submitFun">确 认</el-button>      </div>    </el-dialog>  </div>  <script>    new Vue({      el: '#app',      data() {        return {          // 管制弹层显示和暗藏          isShow: false,          // 页面上展现的赠品列表          livGiftList: [],          // 模仿赠品列表ajax数据          giftProdctListCopy: [            {              name: "测试1",              price: 1,              id: 1            },            {              name: "测试2",              price: 10,              id: 2            },            {              name: "测试3",              price: 9,              id: 3            },            {              name: "测试4",              price: 3,              id: 4            },          ],          // 赠品弹层          giftProdctList: []        }      },      methods: {        // 增加赠品按钮        addGiftFun() {          this.isShow = true;          let checkedList = this.livGiftList;          // 获取到页面展现的赠品列表，拿到赠品id汇合          checkedId = checkedList.map((item) => {            return item.id          })          // 模仿ajax申请: JSON.parse(JSON.stringify(this.giftProdctListCopy))          // 渲染赠品弹层数据并且高亮被选中的赠品          this.giftProdctList = JSON.parse(JSON.stringify(this.giftProdctListCopy)).map((item) => ({            ...item,            // 高亮被选中的赠品            checked: checkedId.includes(item.id)          }));          console.log(this.giftProdctList, 'giftProdctList')        },        // 赠品弹层点击确认        submitFun() {          this.isShow = false;          this.livGiftList = this.giftProdctList.filter((item) => {            return item.checked;          })          console.log(this.livGiftList, 'this.livGiftList')        },        // 删除赠品        delGiftFun(index, row) {          row.splice(index, 1)        },      }    })  </script></body></html>