elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能(兩種方法)
更新時(shí)間：2018年09月04日 10:28:29 作者：chicheese
小編最近遇到這樣的需求，當(dāng)點(diǎn)擊一個(gè)按鈕可以變換里面字的內(nèi)容，剛開(kāi)始還真是一頭霧水，不知所措。仔細(xì)想想屢屢思緒，很容易的解決了。接下來(lái)通過(guò)本文給大家介紹elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能,需要的朋友可以參考下
在做后臺(tái)管理系統(tǒng)中遇到一個(gè)需求, 點(diǎn)擊一個(gè)按鈕可以變換里面字的內(nèi)容
當(dāng)狀態(tài)為顯示的時(shí)候, 該行第一個(gè)按鈕為隱藏;
當(dāng)狀態(tài)為隱藏的時(shí)候, 該行第一個(gè)按鈕為顯示;
具體代碼如下:
<!-- 數(shù)據(jù)表格 -->
<el-table :data="tableData" class="table" stripe border v-loading="loading">
<el-table-column type="index" label="序號(hào)" 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="序號(hào)" 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>
總結(jié)
以上所述是小編給大家介紹的elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)無(wú)縫輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷圖文詳解
這篇文章主要給大家介紹了關(guān)于vue的index.html中獲取環(huán)境變量和業(yè)務(wù)判斷的相關(guān)資料,對(duì)vue來(lái)說(shuō)index.html是一個(gè)總的入口文件,vue是單頁(yè)面應(yīng)用,掛在id為app的div下然后動(dòng)態(tài)渲染路由模板,需要的朋友可以參考下2023-09-09
前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)
當(dāng)我們遇到定位展示的時(shí)候會(huì)出現(xiàn)使用地圖展示的需求,下面這篇文章主要給大家介紹了關(guān)于前端項(xiàng)目中如何使用百度地圖api(含實(shí)例)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue.js element-ui tree樹(shù)形控件改iview的方法
這篇文章主要介紹了vue.js element-ui tree樹(shù)形控件改iview的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
今天小編就為大家分享一篇vue-cli 3.x 修改dist路徑的方法，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目如何讀取本地json文件數(shù)據(jù)實(shí)例
很多時(shí)候我們需要從本地讀取JSON文件里面的內(nèi)容,這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目如何讀取本地json文件數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2023-06-06
map()函數(shù)定義在JS的array中,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于Vue中map()的用法案例,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue實(shí)現(xiàn)hash模式網(wǎng)址方式(就是那種帶#的網(wǎng)址、井號(hào)url)
這篇文章主要介紹了Vue實(shí)現(xiàn)hash模式網(wǎng)址方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue程序化的事件監(jiān)聽(tīng)器(實(shí)例方案詳解)
本文通過(guò)兩種方案給大家介紹了Vue程序化的事件監(jiān)聽(tīng)器，每種方案通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2020-01-01
vue實(shí)現(xiàn)通過(guò)手機(jī)號(hào)發(fā)送短信驗(yàn)證碼登錄的示例代碼
本文主要介紹了vue實(shí)現(xiàn)通過(guò)手機(jī)號(hào)發(fā)送短信驗(yàn)證碼登錄的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05