elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能(兩種方法)
更新時(shí)間：2018年09月04日 10:28:29 作者：chicheese
小編最近遇到這樣的需求，當(dāng)點(diǎn)擊一個(gè)按鈕可以變換里面字的內(nèi)容，剛開始還真是一頭霧水，不知所措。仔細(xì)想想屢屢思緒，很容易的解決了。接下來通過本文給大家介紹elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能,需要的朋友可以參考下
在做后臺管理系統(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="序號" 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>
總結(jié)
以上所述是小編給大家介紹的elementUI Vue 單個(gè)按鈕顯示和隱藏的變換功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue3組合API中setup、 ref、reactive的使用大全
本文給大家介紹vue3組合API中setup、 ref、reactive的用法，初步了解reactive的使用及具體用法，通過示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-06-06
這篇文章主要介紹了vue中的proxyTable反向代理(親測有用)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
父組件中vuex方法更新state子組件不能及時(shí)更新并渲染的完美解決方法
這篇文章主要介紹了父組件中vuex方法更新state子組件不能及時(shí)更新并渲染的完美解決方法,需要的朋友可以參考下2018-04-04
使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)
這篇文章主要介紹了使用Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)，整篇文章圍繞Vue3進(jìn)行數(shù)據(jù)綁定及顯示列表數(shù)據(jù)的想換自來哦展開內(nèi)容,需要的小伙伴可以參考一下2021-10-10
Vue項(xiàng)目添加前綴,ngnix發(fā)布相關(guān)修改問題
這篇文章主要介紹了Vue項(xiàng)目添加前綴,ngnix發(fā)布相關(guān)修改問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
這篇文章主要介紹了Vue安裝瀏覽器開發(fā)工具步驟詳解，本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了vue抽出組件并傳值實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要給大家介紹了關(guān)于vue3.0項(xiàng)目快速搭建的相關(guān)資料,本文通過圖文以及實(shí)例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue3.0具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-12-12
這篇文章主要介紹了詳解vue 自定義組件使用v-model 及探究其中原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要介紹了vxe-table vue table 表格組件功能，功能非常強(qiáng)大，文中給大家提到了功能點(diǎn),需要的朋友可以參考下2019-05-05