左滑动删除-使用MIntUI的CellSwiper，删除传入参数

【实现效果】实现效果如下图~样式随便写的，最下面是代码

1、官网的使用说明

使用说明地址：http://mint-ui.github.io/docs/#/zh-cn2/cell-swipe
官网的使用例子

<mt-cell-swipe
  title="标题文字"
  :right="[
    {
      content: 'Delete',
      style: { background: 'red', color: '#fff' },
      handler: () => this.$messagebox('delete')
    }
  ]"></mt-cell-swipe>

2、使用过程中出现的问题

我是基于官方的使用说明使用的，下面是自己项目中遇到的问题，代码中有解决方法

• 删除回调函数handler需要传递参数，这个是应该经常会遇到的，确定删除条数的index

rightDelete(index){
	return[
		{
			content: '删除',
			style: { background: 'red', color: '#fff','align-items':'center','display': 'flex'},
			handler: () => this.delete(index) 
		}
	]
}

3、全部代码

<template>
	<div>
		<mt-cell-swipe v-for='(item,index) in allList' :key='index'
				:right='rightDelete(index)'
			>
				<div class="item">
					<div class="txt">
						<div class='time'>
							<span>开始时间 {{item.startTime}}span>
							<span>结束时间 {{item.endTime}}span>
						div>
						<div class="repeat">重复规则：
							<span>{{item.repeatList.join()}}span>
						div>
					div>
					<div class="btn">重复规则div>
				div>
			mt-cell-swipe>	
	div>
template>
<script>
import {  CellSwipe  } from 'mint-ui';
export default {
	data(){
		return{
			allList:[  // 模拟从后台获取过来的数据格式
				{
					repeatList:['周一','周三'],
					startTime:'00:00',
					endTime:'20:20',
				},
				{
					repeatList:['周二','周四','周五'],
					startTime:'12:00',
					endTime:'23:59',
				},
				{
					repeatList:['周六','周日'],
					startTime:'00:00',
					endTime:'23:59',
				}
			],
		}
	},
	methods:{
		rightDelete(index){
			return[
				{
					content: '删除',
					style: { background: 'red', color: '#fff','align-items':'center','display': 'flex'},
					handler: () => this.delete(index) 
				}
			]
		},

		delete(index){
			console.log('删除函数',index);
			this.allList.splice(index,1);
		}
	},
}
script>
<style lang="less">
.mint-cell-value{
	width:100%;
}
style>
<style lang="less" scoped>
.mint-cell{
	border-bottom: 1px solid #e5e5e5;
	.item {
		width:100%;
		padding: 0.25rem 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.txt{
			text-align: left;
			font-size:0.37rem;
			.time{
				margin-bottom:0.25rem;
				span{
					margin-right:0.52rem;
				}
			}
			.repeat{
				font-size:0.29rem;
				color:#999;
			}
		}
		.btn{
			// padding:0.15rem 0.2rem;
			padding:5px 8px;
			background-color: #6edbf1;
			border-radius: 0.13rem;
			font-size:0.34rem;
			color:#fff;

		}
	}
}

.mint-cell:first-child{
	border-top: 1px solid #e5e5e5;
}
style>