标签：el index column 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,column,ruleForm,ui,table,operation,tableData,icon
来源： https://www.cnblogs.com/zyfenblog/p/16627944.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。