vue?element-ui如何在el-tabs組件最右側添加按鈕
更新時間：2023年07月18日 09:35:52 作者：神秘人加1
這篇文章主要介紹了vue?element-ui如何在el-tabs組件最右側添加按鈕問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
element-ui在el-tabs組件最右側添加按鈕
需求
需要在tabs頁簽切換欄的最右邊添加一個按鈕。如圖：
實現(xiàn)方案
使用CSS來實現(xiàn)，css原理解釋：
1.如果div的position設置了relative屬性，但是沒有指定偏移量，則相當于默認的position：static；
2.position：static 默認值，沒有定位，元素出現(xiàn)在正常的流中；
3.position：absolute 絕對定位 相對于定位方式不是static的第一個父元素進行定位（往上尋找參照元素，一直到根元素為止，即body）；
代碼如下：
<div style='position: relative;'>
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
<el-tab-pane label="Tab頁簽標題1" name="first">Tab頁簽內(nèi)容1</el-tab-pane>
<el-tab-pane label="Tab頁簽標題2" name="second">Tab頁簽內(nèi)容2</el-tab-pane>
</el-tabs>
<el-button size='mini' style='position: absolute;right:10px;top:5px;'>右邊按鈕</el-button>
</div>element Table增加操作按鈕例如編輯和刪除
實際還是參考官方文檔，官方文檔鏈接
https://element.eleme.cn/#/zh-CN/component/table
找到Table表格這里點擊查看相關內(nèi)容
找到自定義列模板，這個模板比較適合做增刪改查
分析模板
①模板效果圖
②模板代碼
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
label="日期"
width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
<el-table-column
label="姓名"
width="180">
<template slot-scope="scope">
<el-popover trigger="hover" placement="top">
<p>姓名: {{ scope.row.name }}</p>
<p>住址: {{ scope.row.address }}</p>
<div slot="reference" class="name-wrapper">
<el-tag size="medium">{{ scope.row.name }}</el-tag>
</div>
</el-popover>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀區(qū)金沙江路 1516 弄'
}]
}
},
methods: {
handleEdit(index, row) {
console.log(index, row);
},
handleDelete(index, row) {
console.log(index, row);
}
}
}
</script>③找到編輯刪除按鈕的核心代碼并關注此模板給出的提示
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">編輯</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">刪除</el-button>
</template>
</el-table-column>tips：通過 Scoped slot 可以獲取到 row, column, $index 和 store（table 內(nèi)部的狀態(tài)管理）的數(shù)據(jù)，用法參考 demo。
我從其他文章中看到說
<template slot-scope="scope"></template>
是固定寫法，關鍵關注點在scope,scope的話具體使用規(guī)則就在上面的tips中，我們通過scope就可以獲取到row行信息，然后傳遞給按鈕事件（例如單擊事件click）觸發(fā)的自定義函數(shù)中，然后傳遞給后臺，實現(xiàn)處理相關行數(shù)據(jù)的目標。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
定時器如果不及時合理地清除，會造成業(yè)務邏輯混亂甚至應用卡死的情況，這個時就需要清除定時器，本文就介紹了Vue如何優(yōu)雅的清除定時器，感興趣的可以了解一下2021-07-07
Vue+tracking.js 實現(xiàn)前端人臉檢測功能
這篇文章主要介紹了Vue+tracking.js 實現(xiàn)前端人臉檢測功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04
這篇文章主要介紹了vue事件處理原理及過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2021-10-10
Vue項目中安裝依賴npm?install一直報錯的解決過程
這篇文章主要給大家介紹了關于Vue項目中安裝依賴npm?install一直報錯的解決過程,要解決NPM安裝依賴報錯,首先要分析出錯誤的原因,文中將解決的過程介紹的非常詳細,需要的朋友可以參考下2023-05-05
Vue項目部署的實現(xiàn)（阿里云+Nginx代理+PM2）
這篇文章主要介紹了Vue項目部署的實現(xiàn)（阿里云+Nginx代理+PM2），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue數(shù)據(jù)push后不能響應式更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了Vue實現(xiàn)全局菜單搜索框的示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-02-02
這篇文章主要為大家介紹了eslint在vue中如何使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue+element-ui監(jiān)聽滾動實現(xiàn)錨點定位方式(雙向),錨點問題
這篇文章主要介紹了vue+element-ui監(jiān)聽滾動實現(xiàn)錨點定位方式(雙向),錨點問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
本文主要介紹了Vue?編程式路由導航2022-04-04