[iview]Table中data改变switch值无法刷新问题

最新推荐文章于 2023-09-18 09:00:00 发布

原创最新推荐文章于 2023-09-18 09:00:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

Vue 专栏收录该内容

24 篇文章

订阅专栏

本文介绍如何在Vue.js中使用i-switch组件实现表格中行的状态切换，通过监听开关变化并更新数据源，实现行显示与隐藏的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<Table
		:data="data"
		:columns="columns"
		stripe
	>
		<template slot-scope="{ row }" slot="status">
			<i-switch :value="row.show===1" @on-change="onStatusChange(row,$event)">
				<span slot="open">开</span>
				<span slot="close">关</span>
			</i-switch>
		</template>
	</Table>
</template>

<script>
export default {
	data() {
		return {
			data: [
				{
					id: 1,
					show: 1
				},
				{
					id: 2,
					show: 1
				},
				{
					id: 3,
					show: 1
				},
				{
					id: 4,
					show: 1
				},
				{
					id: 5,
					show: 0
				}
			],
			columns: [
				{
					title: 'ID',
					key: 'id'
				},
				{
					title: '状态',
					slot: 'status'
				}
			]
		}
	},
	methods: {
		onStatusChange(row, event) {
			// Vue.js 不能检测到对象属性的添加或删除
			// $set()方法重新渲染
			this.$set(row, 'show', Number(event))
			this.$nextTick(() => {
				this.data.splice(row.id - 1, 1)
			})
		}

	}
}
</script>