首页 > 其他分享 >element-ui 在 el-table 标题中添加小图标

element-ui 在 el-table 标题中添加小图标

时间:2022-08-26 16:36:56浏览次数:59  
标签:el index ruleForm ui table operation tableData icon

效果如下:

html代码:

<div class="table-box cus-table-box">
    <el-table :data="ruleForm.tableData" border style="width: 100%">
        <el-table-column prop="operation" label="操作" :render-header="renderHeader">
            <template slot-scope="scope">
                <el-button class="default-btn" size="mini" type="success" plain  @click="handleClick(scope.$index,ruleForm.tableData)" :class="{'defaultActive':scope.row.operation == '1'}">{{scope.row.operation == "1" ? "默认":"设为默认"}}</el-button>
                 <i class="el-icon-delete delete-btn" @click="deleteRow(scope.$index, ruleForm.tableData)"></i>
            </template>
        </el-table-column>
        <el-table-column prop="contacts" label="客户联系人" :render-header="renderHeaderO">
            <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.contacts" placeholder="请输入内容"></el-input>
            </template>
        </el-table-column>
        <el-table-column prop="phonenum" label="客户电话" :render-header="renderHeaderO">
            <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.phonenum" placeholder="请输入内容"></el-input>
            </template>
        </el-table-column>
        <el-table-column prop="post" label="职务" :render-header="renderHeaderO">
            <template slot-scope="scope">
                <el-input size="mini" v-model="scope.row.post" placeholder="请输入内容"></el-input>
            </template>
        </el-table-column>
    </el-table>
</div>

 

js代码:

//在头部标题上添加“新增”图标
renderHeader(h,{column}){
    return h(
        'div',
        [
            h('span',column.label),
            h('i',{
                class:'add-btn-icon el-icon-plus',
                on:{
                  click:this.addTableColumn //点击执行函数
                }
            })                        
        ]
    )
},
//在头部标题上添加小图标
renderHeaderO(h,{column}){
    return h(
        'div',
        [
            h('span',column.label),
            h('i',{
                class:'eidt-btn-icon el-icon-edit-outline'
            })                        
        ]
    )
},
//添加
addTableColumn(){
    var newRow = {
        operation:"0",
        contacts:"",
        phonenum:"",
        post:""
    };
    this.ruleForm.tableData.push(newRow)
},
//设置默认
handleClick(index,tableData){
    for(var i = 0;i < this.ruleForm.tableData.length;i++){
        if(index == i){
             this.ruleForm.tableData[i].operation = "1";
        }
        else{
            this.ruleForm.tableData[i].operation = "0";
        }
    }
},
//点击删除
deleteRow(index, rows){
    rows.splice(index, 1);
}

 

标签:el,index,ruleForm,ui,table,operation,tableData,icon
From: https://www.cnblogs.com/zyfenblog/p/16627944.html

相关文章

  • Shell的四种启动方式 配置文件加载
    根据是否需要登录可分为:登录式 非登录式根据是否交互可分为:交互式、非交互式二者组合:登录交互式:常用  通过用户名密码登录shell,或者bash--login新启动的shell登......
  • MAUI Android Splash
    MAUI的Splash可以直接在Resources/Splash文件夹下直接更改,参阅官方文档https://docs.microsoft.com/zh-cn/dotnet/maui/user-interface/images/splashscreen?tabs=ios......
  • win32com: 修改excel已用区域的列宽
    fromwin32com.clientimportDispatchif__name__=='__main__':excel=Dispatch("ket.Application")#启动wpsexcel应用。Microsoftexcel用Excel.Applica......
  • (转)CentOS6 iptables 记录指定IP的网络访问日志
     修改文件/etc/rsyslog.conf加入#DIYiptablesLogsave#kern.warning/var/log/iptables/iptables.logkern.debug/var/log/iptables/iptables.log修改文件/etc/......
  • celery
    一.Celery简介在程序的运行过程中,我们经常会碰到一些耗时耗资源的操作,为了避免它们阻塞主程序的运行,我们经常会采用多线程或异步任务。比如,在Web开发中,对新用户的注册,......
  • 使用shell脚本导出数据
    话不多说,直接上码dbuser='用户名'dbpassword='密码'dbname='库名'backtime=`date+%Y%m%d%H%M%S`logpath='日志路径'datapath='数据存放路径'echo'开始导出数据库......
  • flutter系列之:构建Widget的上下文环境BuildContext详解
    目录简介BuildContext的本质BuildContext和InheritedWidgetBuildContext的层级关系总结简介我们知道Flutter中有两种Widget,分别是StatelessWidget和StatefulWidget,Statel......
  • 通过iptables转发到TDSQL实现外网访问云数据库
    腾讯云有些TDSQL,如pgsql版的不能通过外网访问。此时提供2种方案,一种是nginx转发,一种是iptables。这看起来都需要额外的服务器成本,没办法。这里我们使用iptables,因为最方便......
  • Xshell下vim异常问题记录
    问题描述:一直使用xshell作为远程管理服务器的工具,最近在使用vim编辑文档时总是出现异常,进入插入模式总是光标下移两行,回车键后总是出现莫名其妙的内容,在vim左下的状态行也......
  • cruel
    Crueltyispleasureininflictingsufferingorinactiontowardsanother'ssufferingwhenaclearremedyisreadilyavailable.Sadismcanalsoberelatedtothi......