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