ant design vue table 高度自适应_Table行内的开关组件的使用

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.接下来就能正常解决开关的问题啦！

以上是我的个人笔记，探索未知密宝，记录学习笔记，分享有趣的故事，欢迎大家来访！