【Vue】el-button按鈕顯示/隐藏

路由跳轉不同頁面，顯示相應的按鈕，在這裡，小編介紹一下如何設定el-button的隐藏和顯示，僅做筆記，請多指教！

實作效果：

添加/編輯頁面 顯示取消、釋出、儲存；詳情頁，如果是已釋出狀态，顯示下線：

實作代碼如下：

定義四個按鈕：

<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'
     }
   }
}
           

總結：

每一個小細節，都能給使用者很好的體驗，緻敬偉大的計算機科學！

計算機的美妙想法來自生活，感恩偉大的奠基者！