最近在开发一个功能：有一个赠品弹层，里面可以选择赠品，点击确定，可将选中的赠品展示在页面上。页面上的赠品列表有删除按钮，可以删除对应的数据，并且赠品弹层对应的那条数据取消选中。
下面是代码:
<!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="80">
<template slot-scope="{ row }">
<el-input v-model="row.giftCount" style="width: 150px" />
</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-form ref="dataForm" :inline="true" label-width="80px" :model="temp">
<el-form-item label="名称">
<el-input v-model.trim="temp.name" type="text" placeholder="请输入赠品名称" style="width: 150px" clearable
@input="handleFilterGift" />
</el-form-item>
</el-form>
<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" :disabled="row.disabled">{{
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: [],
// 复制赠品弹层的数据，用作查询使用
giftProdctList2: [],
// 表单数据
temp: {
name: "",
},
}
},
methods: {
// 添加赠品按钮
addGiftFun() {
this.temp.name = '';
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),
disabled: checkedId.includes(item.id)
}));
this.giftProdctList2 = this.giftProdctList;
},
// js对比对象数组的原数据和传递过来的新数据，如果旧数据里面包含新数据，则保留旧数据，否则放入新数据
dataCompare(oldList, newList) {
return newList.map(newItem => {
const oldItem = oldList.find(oldItem => oldItem.id === newItem.id);
return oldItem || newItem;
});
},
// 赠品弹层点击确认
submitFun() {
this.isShow = false;
const checkedList = this.giftProdctList2.filter((item) => item.checked);
this.livGiftList = this.dataCompare(this.livGiftList, checkedList);
},
// 删除赠品
delGiftFun(index, row) {
row.splice(index, 1)
},
// 赠品查询
handleFilterGift() {
this.giftProdctList = this.giftProdctList2.filter((item) => {
return item.name.includes(this.temp.name)
})
},
}
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。