Vue 渲染状态标签

Posted qzdd

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 渲染状态标签相关的知识,希望对你有一定的参考价值。

想要做成这样的效果,如图
技术图片

这是接口文档
技术图片

这是响应结果
技术图片

我们需要的是mg_state 的状态,根据是 true 还是 false 在前台显示按钮是否打开

这是前台显示时候的代码

技术图片

根据 {{scope.row}} 可以拿到所在行的数据,如图

技术图片

我们使用Element中的switch 组件,如图

技术图片

代码如下
技术图片
效果如下
技术图片


> 补充一点

技术图片

我们既然在插槽中绑定了mg_state,他会默认覆盖上面的prop="mg_state" 内容,所以我们可以prop 删掉

技术图片






以上是关于Vue 渲染状态标签的主要内容,如果未能解决你的问题,请参考以下文章

使用带有渲染功能的 Vue.js 3 片段

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

vue中的组件

顶点