本示例基于vue3 + element-plus
注:表格数据返回状态值为0、1。开关使用 v-model="scope.row.state === '0'" 会报错
故需要对写法做些修改,效果图如下
<el-table-column prop="state" label="入学状态" width="180" align="center"><template #default="scope"><el-switch:model-value="scope.row.state === '0'"@update:modelValue="val => updateState(scope.row, val)":active-icon="Check" :inactive-icon="Close" /></template>
</el-table-column><script setup>const updateState = (row, newValue) => {row.state = newValue ? '0' : '1';console.log(`更新学生 ${row.id} 状态为: ${row.state}`);};</script>