效果如下:
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); }