<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>
[iview]Table中data改变switch值无法刷新问题
最新推荐文章于 2024-05-28 00:45:00 发布