el-table列中加入el-switch开关
时间: 2023-11-07 20:50:25 浏览: 111
在 el-table 的列中加入 el-switch 开关可以通过自定义列模板来实现。下面是一个示例代码:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="status" label="状态">
<template slot-scope="scope">
<el-switch v-model="scope.row.status" @change="handleSwitchChange(scope.row)"></el-switch>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: '张三', age: 20, status: false },
{ name: '李四', age: 25, status: true },
{ name: '王五', age: 30, status: false }
]
};
},
methods: {
handleSwitchChange(row) {
// 处理开关状态变化的逻辑
console.log(row.name + '的状态变为:' + row.status);
}
}
};
</script>
```
在上面的示例中,我们使用了 el-table 和 el-switch 组件。在 el-table-column 的模板中,我们使用了 slot-scope 来获取每行的数据,然后将 el-switch 组件的状态绑定到对应行的 status 属性上,通过 @change 监听开关状态的变化,触发相应的逻辑处理函数 handleSwitchChange。在这个函数中,你可以根据需要进行状态变化的处理操作。
希望这个示例能帮助到你!如果有任何问题,请随时提问。
阅读全文
相关推荐

















