Elment UI的el-table-column表头旁边有点击按钮类似的操作

新老农

已于 2024-01-23 17:21:13 修改

阅读量740

点赞数 6

文章标签： ui vue.js 前端

于 2024-01-23 17:09:41 首次发布

懒虫

本文链接：https://blog.csdn.net/xcbzsy/article/details/135776491

版权

Elment UI的el-table-column表头旁边有点击按钮类似的操作

   <el-table-column fixed="right" label="操作" >
       <!-- 表头 -->
{{--            <template slot="header" header="scope">--}}
{{--                <span>{{ "信息:" + subBureau }}&nbsp;&nbsp;</span>--}}
{{--                <span @click="selectBtn">选择</span>--}}
{{--            </template>--}}
         <template slot="header" header="scope">
           <span>{{ "操作" }}&nbsp;&nbsp;</span>
           <span><el-button @click="addRowList()" type="warning" size="small">增加</el-button></span>
       </template>
       <template slot-scope="scope">
           <el-button @click="deleteRowList(scope.row,1)" type="warning" size="small">删除</el-button>
       </template>
   </el-table-column>

   deleteRowList(){
     console.log('del')
   },
   addRowList(){
     console.log('add')
   },

在这里插入图片描述

或
在这里插入图片描述

   <el-table-column label="操作" :render-header="renderHeader" width="150">
       <template scope="scope">
           <el-button type="warning" size="mini" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)" circle></el-button>
           <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDel(scope.$index, scope.row)" circle></el-button>
       </template>
   </el-table-column>

     // 表头操作栏按钮
    renderHeader(h, params) {
         let a =  [
             h('el-button-group',[
                 // 文字提示
                 h('el-tooltip',{
                     props: {
                         disabled: false,
                         content: "增加测试用例",
                         placement: "bottom",
                         effect: "light"

                     },
                 },
                 [
                     // 增加按钮
                     h('el-button', {
                         props: {
                             size: "mini",
                             type: "primary",
                             icon: "el-icon-add-location"
                         },
                         on: {
                             click: () => {
                                 this.renderAddRow();
                             }
                         }
                     })
                 ]),
                 
                 h('el-tooltip',{
                     props: {
                         disabled: false,
                         content: "全局变量",
                         placement: "bottom",
                         effect: "light"                                
                     }
                 },
                 [
                     // 全局变量按钮
                     h('el-button', {
                         props: {
                             size: "mini",
                             type: "primary",
                             icon: "el-icon-share"
                         },
                         on: {
                             click: () => {
                                 this.renderAddRow();
                             }
                         }
                     }),
                 ]),
                 h('el-tooltip',{
                     props: {
                         disabled: false,
                         content: "系统函数",
                         placement: "bottom",
                         effect: "light"                                
                     }
                 },
                 [
                     // 系统函数按钮
                     h('el-button', {
                         props: {
                             size: "mini",
                             type: "primary",
                             icon: "el-icon-share"
                         },
                         on: {
                             click: () => {
                                 this.renderAddRow();
                             }
                         }
                     }),
                 ]),
             ])
         ]
         return h('div', a);
     },