iview table组件和i-switch使用时,怎么根据i-switch更新table中的值
时间: 2024-02-23 20:59:11 浏览: 89
可以在 i-switch 的 change 事件中获取到当前 i-switch 的值以及所在行的索引,然后通过索引修改 table 的数据源中相应的数据即可。具体操作可以参考以下示例代码:
```html
<template>
<Table :columns="columns" :data="tableData">
<template slot-scope="{ row }" slot="custom">
<i-switch v-model="row.active" @change="handleSwitchChange(row, $event)"></i-switch>
</template>
</Table>
</template>
<script>
export default {
data() {
return {
columns: [
{
title: '名称',
key: 'name'
},
{
title: '状态',
key: 'active',
render: (h, params) => {
return h('span', params.row.active ? '启用' : '禁用');
},
slot: 'custom'
}
],
tableData: [
{
name: '选项1',
active: true
},
{
name: '选项2',
active: false
},
{
name: '选项3',
active: true
}
]
};
},
methods: {
handleSwitchChange(row, value) {
row.active = value;
// 更新 table 的数据源
this.tableData.splice(this.tableData.indexOf(row), 1, row);
}
}
};
</script>
```
在上述示例代码中,通过在 i-switch 的 change 事件中调用 handleSwitchChange 方法来更新 table 的数据源,其中 row 表示所在行的数据,value 表示当前 i-switch 的值。在 handleSwitchChange 方法中,通过修改 row 的 active 属性来更新数据源,并且使用 splice 方法替换原来的数据,从而实现更新 table 中的值。
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rplib](https://img-home.csdnimg.cn/images/20250102104920.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![rp](https://img-home.csdnimg.cn/images/20250102104920.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![-](https://img-home.csdnimg.cn/images/20241231045053.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)