vue3表格使用Switch 开关

小约翰仓鼠2025-06-09 16:13

本示例基于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>