快捷導(dǎo)航

elementui之el-table如何通過(guò)v-if控制按鈕顯示與隱藏

更新時(shí)間：2023年11月17日 09:38:04 作者：在奮斗的大道

這篇文章主要介紹了elementui之el-table如何通過(guò)v-if控制按鈕顯示與隱藏問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

el-table通過(guò)v-if控制按鈕顯示與隱藏

前端效果演示

后端代碼

 <el-row>
            <el-table :data="tableData" style="width: 100%;" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                        <el-table-column prop="privilegeName" label="權(quán)限名稱" >
                        </el-table-column>
                        <el-table-column prop="privilegeCode" label="權(quán)限編碼" >
                        </el-table-column>
                        <el-table-column prop="privilegeType" label="權(quán)限類別" :formatter="formatPrivilegeType" >
                        </el-table-column>
 
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button  v-if="scope.row.privilegeType === '1' || scope.row.privilegeType === '2'" type="primary" size="mini" @click="toAdd(scope)">新增</el-button>
                                <el-button type="primary" size="mini" @click="toEdit(scope)">編輯</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <br>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pagination.pageIndex"
                        :page-sizes="[5, 10, 20, 30, 40]"
                        :page-size=pagination.pageSize
                        layout="total, prev, pager, next"
                        :total=pagination.total>
                    </el-pagination>
        </el-row>

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3.0封裝輪播圖組件的步驟
這篇文章主要介紹了vue3.0封裝輪播圖組件的步驟，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-03-03
Vue中CSS?scoped的原理詳細(xì)講解
在組件中增加的css加了scoped屬性之后,就在會(huì)在當(dāng)前這個(gè)組件的節(jié)點(diǎn)上增加一個(gè)data-v-xxx屬性,下面這篇文章主要給大家介紹了關(guān)于Vue中CSS?scoped原理的相關(guān)資料,需要的朋友可以參考下
2023-01-01
關(guān)于vue-router的使用及實(shí)現(xiàn)原理
這篇文章主要介紹了關(guān)于vue-router的使用及實(shí)現(xiàn)原理，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
vue計(jì)算屬性get和set用法示例
這篇文章主要介紹了vue計(jì)算屬性get和set用法,結(jié)合實(shí)例形式分析了計(jì)算屬性的功能及get和set用法的具體使用技巧,需要的朋友可以參考下
2019-02-02
vue3封裝echarts組件的實(shí)現(xiàn)步驟
這篇文章主要介紹了如何在Vue3中封裝一個(gè)高效、可復(fù)用的ECharts組件TChart,該組件支持響應(yīng)式圖表、空數(shù)據(jù)展示、事件監(jiān)聽(tīng)、主題切換和性能優(yōu)化等功能,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-01-01
Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼
這篇文章主要介紹了Vue 頁(yè)面權(quán)限控制和登陸驗(yàn)證功能的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-06-06
如何使用Vue3實(shí)現(xiàn)文章內(nèi)容中多個(gè)"關(guān)鍵詞"標(biāo)記高亮顯示
高亮顯示是我們?nèi)粘ｉ_發(fā)中經(jīng)常會(huì)遇到的需求,下面這篇文章主要給大家介紹了關(guān)于如何使用Vue3實(shí)現(xiàn)文章內(nèi)容中多個(gè)"關(guān)鍵詞"標(biāo)記高亮顯示的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
Vue前端如何實(shí)現(xiàn)生成PDF并下載功能詳解
在前端的崗位上經(jīng)常需要實(shí)現(xiàn)個(gè)生成個(gè)并下載的可視化圖表頁(yè)P(yáng)DF文件,這篇文章主要給大家介紹了關(guān)于Vue前端如何實(shí)現(xiàn)生成PDF并下載功能的相關(guān)資料,需要的朋友可以參考下
2021-10-10
如何解決vuex在頁(yè)面刷新后數(shù)據(jù)被清除的問(wèn)題
這篇文章主要介紹了如何解決vuex在頁(yè)面刷新后數(shù)據(jù)被清除的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
vant 自定義 van-dropdown-item的用法
這篇文章主要介紹了vant 自定義 van-dropdown-item的用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-08-08