2022丝路通：我的收藏页面

代码

MyFavorate.vue:

<template>
	<div>
		<view>我的收藏</view>

		<el-col :span="18" style="margin-left: 20px; margin-top: 20px; width: 1250px;">

			<el-table :data="tableData" style="width: 100%">
				<el-table-column prop="id" label="id" width="50">
				</el-table-column>
				<el-table-column prop="name" label="产品名称" width="120">
				</el-table-column>
				<el-table-column prop="one_type" label="一级类别" width="80">
				</el-table-column>
				<el-table-column prop="two_type" label="二级类别" width="80">
				</el-table-column>
				<el-table-column prop="price" label="价格" width="80">
				</el-table-column>
				<el-table-column prop="company" label="公司名称" width="80">
				</el-table-column>
				<el-table-column prop="contact" label="联系方式" width="230">
				</el-table-column>
				<el-table-column prop="from_url" label="来源地址" width="70">
				</el-table-column>

				<el-table-column prop="link" label="产品链接" width="200">
				</el-table-column>
				<el-table-column prop="address5" label="操作" width="px">


					<template slot-scope="scope">
					     <el-button type="danger" @click="Del(scope.row.id)">删除</el-button>
					     </template>
					<!-- <el-button type="danger" @click="Del(1)">删除</el-button> -->

				</el-table-column>
			</el-table>

		</el-col>
	</div>
</template>

<script>
	export default {

		data() {
			return {
				dialogVisible: false,
				formInline: {
					user: '',
					region: ''
				},

				activeIndex: '1',
				activeIndex2: '1',
				tableData: [{
					id: '1',
					name: 'Super Thin Portable Laptop I9 Cheap Rtx3060 3070 Gaming Laptop',
					one_type: 'Computer Products',
					two_type: 'Laptop',
					price: 'US $ 230',
					company: 'Shenzhen Clover Industrial Co., Ltd.',
					from_url: "made in china",
					link: 'https://szclover.en.made-in-china.com/product/KwYterzugaAN/China-Super-Thin-Portable-Laptop-I9-Cheap-Rtx3060-3070-Gaming-Laptop.html',
					contact: 'https://www.made-in-china.com/sendInquiry/prod_KwYterzugaAN_wdYatOUJJRlT.html?from=search&type=cs&target=prod&word=Laptop'
				}, {
					id: '2',
					name: 'Super Thin Portable Laptop I9 Cheap Rtx3060 3070 Gaming Laptop',
					one_type: 'Computer Products',
					two_type: 'Laptop',
					price: 'US $ 230',
					company: 'Shenzhen Clover Industrial Co., Ltd.',
					from_url: "made in china",
					link: 'https://szclover.en.made-in-china.com/product/KwYterzugaAN/China-Super-Thin-Portable-Laptop-I9-Cheap-Rtx3060-3070-Gaming-Laptop.html',
					contact: 'https://www.made-in-china.com/sendInquiry/prod_KwYterzugaAN_wdYatOUJJRlT.html?from=search&type=cs&target=prod&word=Laptop'
				}, {
					id: '3',
					name: 'Super Thin Portable Laptop I9 Cheap Rtx3060 3070 Gaming Laptop',
					one_type: 'Computer Products',
					two_type: 'Laptop',
					price: 'US $ 230',
					company: 'Shenzhen Clover Industrial Co., Ltd.',
					from_url: "made in china",
					link: 'https://szclover.en.made-in-china.com/product/KwYterzugaAN/China-Super-Thin-Portable-Laptop-I9-Cheap-Rtx3060-3070-Gaming-Laptop.html',
					contact: 'https://www.made-in-china.com/sendInquiry/prod_KwYterzugaAN_wdYatOUJJRlT.html?from=search&type=cs&target=prod&word=Laptop'
				}, {
					id: '4',
					name: 'Super Thin Portable Laptop I9 Cheap Rtx3060 3070 Gaming Laptop',
					one_type: 'Computer Products',
					two_type: 'Laptop',
					price: 'US $ 230',
					company: 'Shenzhen Clover Industrial Co., Ltd.',
					from_url: "made in china",
					link: 'https://szclover.en.made-in-china.com/product/KwYterzugaAN/China-Super-Thin-Portable-Laptop-I9-Cheap-Rtx3060-3070-Gaming-Laptop.html',
					contact: 'https://www.made-in-china.com/sendInquiry/prod_KwYterzugaAN_wdYatOUJJRlT.html?from=search&type=cs&target=prod&word=Laptop'
				}, ]
			}
		},
		methods: {
			// open: function (id) {
			// 	this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
			// 	  confirmButtonText: '确定',
			// 	  cancelButtonText: '取消',
			// 	  type: 'warning'
			// 	}).then(() => {
			// 	  this.$message({
			// 	    type: 'success',
			// 	    message: '删除成功!'
			// 	  });
			// 	  //删除数据
			// 	  //实际项目中参数操作肯定会涉及到id去后台删除，这里只是展示，先这么处理。
			// 	      // for (var i=0;i<this.rows.length;i++){
			// 	      //     if (this.rows[i].Id == id) {
			// 	      //         this.rows.splice(i, 1);
			// 	      //         break;
			// 	      //     }
			// 	      // }
			// 	  }
			// 	}).catch(() => {
			// 	  this.$message({
			// 	    type: 'info',
			// 	    message: '已取消删除'
			// 	  });          
			// 	});
			// },



			Del(id) {
				this.$confirm('此操作将删除该商品, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$message({
						type: 'success',
						message: '删除成功!'
					});
					for (var i = 0; i < this.tableData.length; i++) {
						if (this.tableData[i].id == id) {
							this.tableData.splice(i, 1);
							break;
						}
					}
					console.log(this.tableData)

				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});


			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			}
		}

	}
</script>

<style>
</style>

截图