快捷導(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)限名稱(chēng)" >
                        </el-table-column>
                        <el-table-column prop="privilegeCode" label="權(quán)限編碼" >
                        </el-table-column>
                        <el-table-column prop="privilegeType" label="權(quán)限類(lèi)別" :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)文章

手把手教你使用寶塔部署Vue項(xiàng)目
這篇文章主要給大家介紹了關(guān)于如何使用寶塔部署Vue項(xiàng)目的相關(guān)資料,寶塔面板提供了非常方便的方式來(lái)部署 Vue 項(xiàng)目,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能
這篇文章主要介紹了Vue使用json-server進(jìn)行后端數(shù)據(jù)模擬功能,非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下
2018-04-04
Vue3?TypeScript?實(shí)現(xiàn)useRequest詳情
本文介紹了Vue3?TypeScript實(shí)現(xiàn)useRequest詳情，useRequest可能是目前社區(qū)中最強(qiáng)大，最接地氣的請(qǐng)求類(lèi)?Hooks了。可以覆蓋99%的網(wǎng)絡(luò)請(qǐng)求場(chǎng)景，無(wú)論是讀還是寫(xiě)，無(wú)論是普通請(qǐng)求還是分頁(yè)請(qǐng)求，無(wú)論是緩存還是防抖節(jié)流，通通都能支持，關(guān)于其介紹需要的小伙伴可以參考一下
2022-05-05
vue如何使用HMAC-SHA256簽名算法
這篇文章主要介紹了vue使用HMAC-SHA256簽名算法的相關(guān)知識(shí),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-07-07
vue之“} expected“和“at-rule or selector ex
這篇文章主要介紹了vue之“} expected“和“at-rule or selector expected“報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
淺談element關(guān)于table拖拽排序問(wèn)題
本文主要介紹了element關(guān)于table拖拽排序問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
element中table操作按鈕展示與折疊的實(shí)現(xiàn)示例
因?yàn)殡S著功能的增多，table操作欄中的功能按鈕增多，這時(shí)候就需要折疊，本文主要介紹了element中table操作按鈕展示與折疊的實(shí)現(xiàn)示例，具有一定的參考價(jià)值，感興趣的可以了解一下
2022-04-04
Vue項(xiàng)目markdown內(nèi)容預(yù)覽顯示優(yōu)化方式
在Vue項(xiàng)目中使用markdown-it組件預(yù)覽Markdown內(nèi)容時(shí),通過(guò)安裝pnpm和markdown-it-github-markdown-css依賴(lài),并重寫(xiě)markdown部分樣式,實(shí)現(xiàn)了Markdown內(nèi)容的美化,在MarkdownPreview.vue組件中,通過(guò)變量renderedMarkdown接收并渲染Markdown內(nèi)容
2025-10-10
詳解element-ui設(shè)置下拉選擇切換必填和非必填
這篇文章主要介紹了詳解element-ui設(shè)置下拉選擇切換必填和非必填，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
vue項(xiàng)目中監(jiān)聽(tīng)手機(jī)物理返回鍵的實(shí)現(xiàn)
這篇文章主要介紹了vue項(xiàng)目中監(jiān)聽(tīng)手機(jī)物理返回鍵的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01