【Vue】el-button按钮显示/隐藏

蔚落 2021-12-09 06:39 5459阅读 0赞

路由跳转不同页面，显示相应的按钮，在这里，小编介绍一下如何设置el-button的隐藏和显示，仅做笔记，请多指教！

**实现效果：**  
添加/编辑页面 显示取消、发布、保存；详情页，如果是已发布状态，显示下线：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvbmd3ZWkxNTczMjYyMzM2NA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvbmd3ZWkxNTczMjYyMzM2NA_size_16_color_FFFFFF_t_70 1]  
**实现代码如下：**  
定义四个按钮：

<el-button @click="visible = false" :style="{ display: visibleCancel }">取消</el-button>
    <el-button type="primary" @click="dataPublish()" :style="{ display: visiblePublish }">发布</el-button>
    <el-button type="primary" @click="dataFormSubmit()" :style="{ display: visibleSubmit }">保存</el-button>
    <el-button type="primary" @click="handleStatus()" :style="{ display: visibleLine }">下线</el-button>

定义显示状态：

data () {
     return {
       visibleCancel: '',   //显示
       visiblePublish: '',   //显示
       visibleSubmit: '',   //显示
       visibleLine: 'none'  //隐藏
       }
    }

初始化init状态：

init (id,state,flag) {
       this.dataForm.id = id || 0
       //如果点详情
       if (flag === 1) {
         this.disable = true
         //如果已发布状态，显示按钮：下线
         if (state === 1) {
           this.visiblePublish = 'none'
           this.visibleSubmit = 'none'
           this.visibleLine = ''
           this.visibleCancel = 'none'
         }else {
           this.visiblePublish = 'none'
           this.visibleSubmit = 'none'
           this.visibleLine = 'none'
           this.visibleCancel = 'none'
         }
       }
    }

**总结：**  
每一个小细节，都能给用户很好的体验，致敬伟大的计算机科学！  
计算机的美妙想法来自生活，感恩伟大的奠基者！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvbmd3ZWkxNTczMjYyMzM2NA_size_16_color_FFFFFF_t_70]: /images/20211208/7e9899dc1d7f402088ae1f62c416121a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvbmd3ZWkxNTczMjYyMzM2NA_size_16_color_FFFFFF_t_70 1]: /images/20211208/20b2201d57864541825ef897c2b30aaf.png