:style="{ display: scope.row.deleted==1?'none':'' }"
> {
{ scope.row.deleted == 0 ? '冻结' : '解除冻结' }} </el-button>
需求是按照delete的值来判断为冻结或者解除冻结，但是有个情况是deleted=1时不显示这个按钮
:style="{ display: scope.row.deleted==1?'none':'' }" 控制按钮是否隐藏
{
{ scope.row.deleted == 0 ? '冻结' : '解除冻结' }} 控制按钮显示的样式
'none':'' }" 控制按钮是否隐藏。'冻结' : '解除冻结' }} 控制按钮显示的样式。需求是按照delete的值来判断为冻结或者解除冻结，但是有个情况是deleted=1时不显示这个按钮。
<div :style="'width:' + width" class="fy-product-tag">
<!--标签选择框-->
<div @click.stop="handleOpen" class="slecte-box-tags">
<div class="tags-box...
vue
前端按钮权限控制
隐藏
权限控制描述如何实现1、储存权限数据2、权限判断方法3、设置
vue
自定义指令4、最终代码与效果
很多后台管理系统会用到权限管理，菜单权限比较好控制，按钮权限就复杂一些，本文介绍的就是按钮权限如何控制，用的是
vue
项目。
权限控制描述
前端需要根据后端传来的权限数据控制是否
显示
新增、编辑、删除（红框所示部分）功能。
菜单管理处设置的新增、删除、编辑权限参数如图红框所示部分...
路由跳转不同页面，
显示
相应的按钮，在这里，小编介绍一下如何设置
el
-
button
的
隐藏
和
显示
，仅做笔记，请多指教！
实现效果：
添加/编辑页面
显示
取消、发布、保存；详情页，如果是已发布状态，
显示
下线：
实现代码如下：
定义四个按钮：
<
el
-
button
@click="visible = false" :style="{ display: visibleCanc
el
}">取消...
如上图所示，如果使用
el
-
button
,加颜色是可以通过设置type属性的值，加图标就设置icon属性的值。
现在产品给了一个需求，就是自定义的很多种类别，不同的类别的按钮
显示
不同的颜色和图标。如下图所示：
为了方便开发，目前的解决方案是：添加一个自定义全局指令，同时在
el
ement-ui源码中，加入对应的组件。开发人员在开发时只要在type中添加不同的类的值，就能添加上颜色和图标。
1、在
el
ement-ui的
button
源码中加了自定义指令otherRender，以及一个局部组件vRender
2、局部组件vRender的写法：
"role":1,
"token":"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyX2lkIjoxLCJ1c2VybmFtZSI6ImFkbWluIiwiZXhwIjoxNjQ2NzI3NDkzLCJlbWFpbCI6IiJ9.9cBPqkkTxXS2aAjwRadcWuQLc5wgHdAG_YeRc82hGz0",
/* radio
button
选中状态的颜色 */
.
el
-radio-
button
__orig-radio:checked+.
el
-radio-
button
__inner {
background-color: #333;
border-color: #333;
/* radio
button
文字的颜色 */
.
el
-radio-
button
__inner {
color: #333;
你可以将这些 CSS 代码添加到你的样式表中，或者使用 `style` 标签将其添加到你的页面中。如果你想更改特定的 `
el
-radio-
button
`，则可以使用 `class` 或 `id` 选择器来选择它。
