elementUI Vue 單個按鈕顯示和隱藏的變換功能(兩種方法)

更新時間：2018年09月04日 10:28:29 作者：chicheese

小編最近遇到這樣的需求，當點擊一個按鈕可以變換里面字的內容，剛開始還真是一頭霧水，不知所措。仔細想想屢屢思緒，很容易的解決了。接下來通過本文給大家介紹elementUI Vue 單個按鈕顯示和隱藏的變換功能,需要的朋友可以參考下

在做后臺管理系統(tǒng)中遇到一個需求, 點擊一個按鈕可以變換里面字的內容

當狀態(tài)為顯示的時候, 該行第一個按鈕為隱藏;

當狀態(tài)為隱藏的時候, 該行第一個按鈕為顯示;

具體代碼如下:

<!-- 數(shù)據(jù)表格 -->
<el-table :data="tableData" class="table" stripe border v-loading="loading">
 <el-table-column type="index" label="序號" width="70"></el-table-column>
 <el-table-column prop="status" label="狀態(tài)"></el-table-column>
 <el-table-column label="操作">
 <template slot-scope="scope">
  <el-button size="mini" type="warning" @click="handleIsDisplay(scope.$index, scope.row)">
   {{scope.row.status=='顯示'?'隱藏':'顯示'}}
  </el-button>
  <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
  <!-- <el-button size="mini" type="danger" @click="handleRemove(scope.$index, scope.row)">刪除</el-button> -->
 </template>
 </el-table-column>
</el-table>

也可以用第二種方法:

<!-- 數(shù)據(jù)表格 -->
<el-table :data="tableData" class="table" stripe border v-loading="loading">
 <el-table-column type="index" label="序號" width="70"></el-table-column>
 <el-table-column prop="status" label="狀態(tài)"></el-table-column>
 <el-table-column label="操作">
 <template slot-scope="scope">
  <el-button v-if="scope.row.status=='顯示'" size="mini" type="warning" 
   @click="handleIsDisplay(scope.$index, scope.row)">隱藏</el-button>
  <el-button v-if="scope.row.status=='隱藏'" size="mini" type="warning" 
   @click="handleIsDisplay(scope.$index, scope.row)">顯示</el-button>
  <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
  <!-- <el-button size="mini" type="danger" @click="handleRemove(scope.$index, scope.row)">刪除</el-button> -->
 </template>
 </el-table-column>
</el-table>

總結

以上所述是小編給大家介紹的elementUI Vue 單個按鈕顯示和隱藏的變換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

您可能感興趣的文章:

Vue實現(xiàn)無縫輪播效果
這篇文章主要為大家詳細介紹了Vue實現(xiàn)無縫輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-04-04
vue的index.html中獲取環(huán)境變量和業(yè)務判斷圖文詳解
這篇文章主要給大家介紹了關于vue的index.html中獲取環(huán)境變量和業(yè)務判斷的相關資料,對vue來說index.html是一個總的入口文件,vue是單頁面應用,掛在id為app的div下然后動態(tài)渲染路由模板,需要的朋友可以參考下
2023-09-09
前端項目中如何使用百度地圖api(含實例)
當我們遇到定位展示的時候會出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關于前端項目中如何使用百度地圖api(含實例)的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-06-06
vue.js element-ui tree樹形控件改iview的方法
這篇文章主要介紹了vue.js element-ui tree樹形控件改iview的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-03-03
vue-cli 3.x 修改dist路徑的方法
今天小編就為大家分享一篇vue-cli 3.x 修改dist路徑的方法，具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue項目如何讀取本地json文件數(shù)據(jù)實例
很多時候我們需要從本地讀取JSON文件里面的內容,這篇文章主要給大家介紹了關于vue項目如何讀取本地json文件數(shù)據(jù)的相關資料,需要的朋友可以參考下
2023-06-06
Vue中map()的用法案例
map()函數(shù)定義在JS的array中,它返回一個新的數(shù)組,下面這篇文章主要給大家介紹了關于Vue中map()的用法案例,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下
2022-07-07
Vue實現(xiàn)hash模式網址方式(就是那種帶#的網址、井號url)
這篇文章主要介紹了Vue實現(xiàn)hash模式網址方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue程序化的事件監(jiān)聽器(實例方案詳解)
本文通過兩種方案給大家介紹了Vue程序化的事件監(jiān)聽器，每種方案通過實例代碼給大家介紹的非常詳細,需要的朋友可以參考下
2020-01-01
vue實現(xiàn)通過手機號發(fā)送短信驗證碼登錄的示例代碼
本文主要介紹了vue實現(xiàn)通過手機號發(fā)送短信驗證碼登錄的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2022-05-05