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

本文主要是介绍element-ui 在 el-table 标题中添加小图标，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

效果如下：

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);
}

这篇关于element-ui 在 el-table 标题中添加小图标的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！