vue?element-ui如何在el-tabs組件最右側(cè)添加按鈕

更新時(shí)間：2023年07月18日 09:35:52 作者：神秘人加1

這篇文章主要介紹了vue?element-ui如何在el-tabs組件最右側(cè)添加按鈕問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

element-ui在el-tabs組件最右側(cè)添加按鈕

需求

需要在tabs頁(yè)簽切換欄的最右邊添加一個(gè)按鈕。如圖：

實(shí)現(xiàn)方案

使用CSS來(lái)實(shí)現(xiàn)，css原理解釋：

1.如果div的position設(shè)置了relative屬性，但是沒(méi)有指定偏移量，則相當(dāng)于默認(rèn)的position：static；

2.position：static 默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的流中；

3.position：absolute 絕對(duì)定位相對(duì)于定位方式不是static的第一個(gè)父元素進(jìn)行定位（往上尋找參照元素，一直到根元素為止，即body）；

代碼如下：

<div style='position: relative;'>
  <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
    <el-tab-pane label="Tab頁(yè)簽標(biāo)題1" name="first">Tab頁(yè)簽內(nèi)容1</el-tab-pane>
    <el-tab-pane label="Tab頁(yè)簽標(biāo)題2" name="second">Tab頁(yè)簽內(nèi)容2</el-tab-pane>
  </el-tabs>
    <el-button size='mini' style='position: absolute;right:10px;top:5px;'>右邊按鈕</el-button>
  </div>

element Table增加操作按鈕例如編輯和刪除

實(shí)際還是參考官方文檔，官方文檔鏈接

https://element.eleme.cn/#/zh-CN/component/table

找到Table表格這里點(diǎn)擊查看相關(guān)內(nèi)容

找到自定義列模板，這個(gè)模板比較適合做增刪改查

在這里插入圖片描述

分析模板

①模板效果圖

在這里插入圖片描述

②模板代碼

<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>

③找到編輯刪除按鈕的核心代碼并關(guān)注此模板給出的提示

<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：通過(guò) Scoped slot 可以獲取到 row, column, $index 和 store（table 內(nèi)部的狀態(tài)管理）的數(shù)據(jù)，用法參考 demo。

我從其他文章中看到說(shuō)

<template slot-scope="scope"></template>

是固定寫法，關(guān)鍵關(guān)注點(diǎn)在scope,scope的話具體使用規(guī)則就在上面的tips中，我們通過(guò)scope就可以獲取到row行信息，然后傳遞給按鈕事件（例如單擊事件click）觸發(fā)的自定義函數(shù)中，然后傳遞給后臺(tái)，實(shí)現(xiàn)處理相關(guān)行數(shù)據(jù)的目標(biāo)。