每天一个 element ui 组件小知识之Switch开关

<template>
  <div>
    <el-switch
    v-model="value"
    :active-value="1"
    :inactive-value="0"
    @change="onChange"
    active-color="#13ce66"
    inactive-color="#ff4949">
    </el-switch>
  </div>
</template>

active-value 设置激活状态值 ，inactive-value 设置关闭状态值 用于切换点击时进行开关的判断

开关发生点击操作的回调函数为change 后加方法名 

方法名不加括号传值时默认可以接收$event ，获取当前的状态值

  methods:{
        onChange($event){
            console.log($event);  //打印上述的 1 0 1 0 ...
        }
    }

但是应用到实际项目中往往还要获取表格元素的其他属性或者值

 <el-switch
    v-model="scope.row.is_show"
    :active-value="1"
    :inactive-value="0"
    @change='onChange($event,scope.row.company_id)'
 >
 </el-switch>

methods:{
  onChange($event,num){
      console.log($event)//0 1 0 1
      console.log(num)// 122642  122660
    }
}

其中scope.row.is_show 为渲染数据时按钮在后端返回的状态字段，决定是开还是关，根据具体字段名自行更改

onChange（）事件的第二个参数就是每行数据的id值，这也是后端设置的字段名，具体情况具体分析，可以在第二位写任何想要获得到的表格同一行的数据，然后在回调处进行操作

一般需要在这里进行的逻辑大致就是判断传入的参数是 1 还是 0 ，然后将唯一标识例如每一行的id通过接口传给后端进行操作。