1.在vue中的table组件中每一行要显示特殊的样式,需要加上
<template slot-scope="scope"> <i class="el-icon-time">i> <span style="margin-left: 10px">{{ scope.row.date }}span> template>
通过Scoped slot
可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,用法参考 demo。
2.然后再显示字段中加入,开关按钮
switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">el-switch>
这里的v-model可以绑定成字段名:规则为:scope.row.字段名
3.接下来在添加按钮的弹窗也修改成按钮的样式!
<template slot-scope="scope"><el-switch v-model="scope.row.showStatus" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="updateBrandStatus(scope.row)">el-switch> template>
4.接下来开始绑定开关的事件@updateBrandStatus(scope.row)参数是代表整行的数据,然后在methods方法体中写好方法。
//监听按钮的状态updateBrandStatus(status){console.log(status)},
输出true,是打开的状态,反之~~~
5.接下来就能正常解决开关的问题啦!
以上是我的个人笔记,探索未知密宝,记录学习笔记,分享有趣的故事,欢迎大家来访!