vue和element ui用el-switch滑动开关改变每行的状态，源码例子_element滑动开关

源码例子：

	<el-table ref="multipleTable" :data="tableData" border tooltip-effect="dark" style="width: 100%" class="table_box">
			<el-table-column prop="status" label="是否上架" align="center" min-width="120">
				<template slot-scope="scope">
					<el-row>
						<el-col :span="12">
							<span v-if="scope.row.status == '2'">上架</span>
							<span v-if="scope.row.status == '1'">下架</span>
						</el-col>
						<el-col :span="12">
							<el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" active-value="2"
							 inactive-value="1" @change="handleSwitch(scope.$index,scope.row)" />
						</el-col>
					</el-row>
				</template>
			</el-table-column>
		</el-table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

		handleSwitch(index, row) {
				const param = {	
					id: row.id,
					status: row.status
				}
				this.changeStatus(param)//更新状态的接口
					.then(res => {
						console.log(res)
						this.getList()
					})
					.catch(() => {})
			}
1
2
3
4
5
6
7
8
9
10
11
12