element 控件 tabel中增加el-switch 并绑定点击事件

先看官网

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>
//change	：switch 状态发生变化时的回调函数	新状态的值**

标题在项目中的实际应用

 
                <el-table :data="table.data" @@selection-change="(array)=>{table.selecteds=array;}"
                          @@row-dblclick="row_dblclick" row-key="keyCode" size="medium" :header-cell-style="{background:'#fafafa'}">
                    <el-table-column prop="name" label="名称" width="140" :show-overflow-tooltip='true'></el-table-column>
                    <el-table-column fixed="right" label="操作" width="100" prop="isValid">
                        <template slot-scope="props"  >
                            <el-switch v-model="props.row.id" @change="text(props.row.id)" active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
                            //v-model="props.row.id" 绑定值，一般后台请求 true 或者false
                            //@change="text(props.row.id)"    绑定事件text的方法
                        </template>
                    </el-table-column>     
                </el-table>

//在javascript中用vue：

var app=new Vue({
  data: function(){
  return{

  }},
methods: {
  text:function(id){
  console.log(id);
  }
}
});