插槽作用域渲染按钮开关 ~ 满满的干货哦

在一个项目中，经常会用到开关，我们就需要渲染开关。今天小编总结了以下具体的步骤，希望可以帮助到有需要的小伙伴~

渲染开关的状态

使用作用域插槽实现开关

通过element-ui实现按钮的样式

Switch开关：https://element.eleme.cn/#/zh-CN/component/switch

渲染按钮的步骤

1. 定义一个作用域插槽，接收当前作用域的数据

2. 通过 v-model 双向数据绑定，将 数据 和 开关的状态 关联起来

   如果 mg_dtate 的值为 true，就 打开 开关

   如果 mg_dtate 的值为 false，就 关闭 开关
   （mg_dtate 是 获取到的后台数据）
   

3. v-model 双向数据绑定 ，可以把 数据 和 开关的状态 关联起来

代码：

<el-table-column label="状态">
          <!-- slot-scope="scope" 取到作用域插槽，即 data绑定的数据 
               scope是可以自定义名字的，定义一个对象 来表示 取到的 data数据
          -->

          <template slot-scope="scope">
            <!-- {{ scope.row }} 获取 “状态”这一行 所有的数据 -->
            <!-- scope.row.mg_dtate 获取 “状态”这一行 mg_dtate 的值，为true还是false -->
            <!-- Switch开关 -->
            <!-- v-model 双向数据绑定 ，可以把 数据 和 开关的状态 关联起来-->
            <el-switch v-model="scope.row.mg_dtate"> </el-switch>
          </template>
        </el-table-column>

如果这篇博客有错误的地方，请各位大佬批评指正。