效果如下:

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);
}
原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/tech/pnotes/282360.html