期望结果:
表格中组件:
在开关外层用插槽包裹,里面写v-model用来绑定字段
<!--用插槽包裹el-switch开关-->
<template #default="scope">
<el-switch active-text="启用" :active-value=1 active-color="#2fa1f1" inactive-text="停用" :inactive-value=0 inactive-color="#9c9c9c" v-model="scope.row.tradingVolumeStatus" @change="handleStatusChange(scope.row)"/> <!--当tradingVolumeStatus=1时switch开启,当tradingVolumeStatus=0时switch关闭-->
</template><!--回显的时候 int类型使用 :active-value,字符串类型不加引号-->
1、绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。
2、使用active-text属性与inactive-text属性来设置开关的文字描述。
3、设置active-value和inactive-value属性,接受Boolean, String或Number类型的值。
绑定事件
function handleStatusChange(row) {
console.log("====="+row);
}