先看官网
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ca867d0ae3a864d2194b742cfd6b09b6.png)
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<script>
export default {
data() {
return {
value: true
}
}
};
</script>
标题在项目中的实际应用
<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>
</template>
</el-table-column>
</el-table>
var app=new Vue({
data: function(){
return{
}},
methods: {
text:function(id){
console.log(id);
}
}
});