el-table中el-select与span 通过点击按钮进行编辑与显示切换；js给数据中的对象添加属性

效果实现：

1.点击新增一行 表格插入空白行
2.当表格项有数据时显示模式 操作显示修改和删除
3.点击修改切换成编辑模式（此处是el-select）

代码部分

<div class="addBtn"><el-button type="primary" size="mini" @click="add()">新增一行</el-button>
</div>
<el-form :model="form" ref="form" ><el-row><el-col :span="24"><el-table class="table-cursor" :data="form.tableData" border><el-table-column prop="indicatorName" label="指标名称" align="center"><template slot-scope="scope"><el-form-item :prop="'tableData.' + scope.$index + '.indicatorName'" :rules="{required: true,message: '值不能为空',trigger: 'change',}"><span v-if="scope.row.isEdit"><el-select clearable v-model="scope.row.indicatorName" @change="scope.row.isEdit = true" filterableclass="dis-time"><el-option v-for="item in indicatorNameTypeList" :key="item.enumValue" :label="item.enumName":value="item.enumValue + ''"></el-option></el-select></span><span v-else>{{ scope.row.indicatorName }}</span></el-form-item></template></el-table-column><el-table-column label="操作" align="center"><template slot-scope="scope"><el-tooltip effect="dark" v-show="scope.row.indicatorName && !scope.row.isEdit" content="编辑"placement="bottom"><el-button type="text" @click="valChange(scope.row, scope.$index, true)">修改</el-button></el-tooltip><el-tooltip effect="dark" v-show="scope.row.indicatorName && !scope.row.isEdit" content="删除"placement="bottom"><el-button type="text" @click="reduce(scope.$index)">删除</el-button></el-tooltip><el-tooltip effect="dark" v-show="scope.row.indicatorName && scope.row.isEdit" content="保存"placement="bottom"><el-button type="text" @click="valChange(scope.row, scope.$index, true)">保存</el-button></el-tooltip></template></el-table-column></el-table></el-col></el-row>
</el-form>

data中定义的： 

 form: {sel: null,tableData: [{indicatorName: "年累计流量",indicatorCode: '3',}]
}

动态给表格数据中添加isEdit属性，用来区别编辑和展示模式切换也是关键所在！（js给数据中的对象添加属性）

 mounted() {this.form.tableData.map(i => {i.isEdit = false})
}

methods中定义的

//增加add() {for (let i of this.form.tableData) {if (i.isEdit) {return this.$message({type: "warning",message: "请先对上一条数据进行保存后再操作"});}}let row = {indicatorName: "",indicatorCode: '',isEdit: true}this.form.tableData.push(row)this.form.sel = row},//删除reduce(index) {this.form.tableData.splice(index, 1)//删除接口},//保存、编辑valChange(row, index, qx) {//点击修改，判断是否已经保存所有操作for (let i of this.form.tableData) {if (i.isEdit && i.indicatorCode != row.indicatorCode) {this.$message({type: "warning",message: "请先对上一条数据进行保存后再操作"});return false}}//提交数据if (row.isEdit) {const v = this.form.sel// 必填项判断if (v.indicatorName == '') {this.$message({type: "warning",message: "请选择指标项"});} else {row.isEdit = false//调用保存接口}} else {this.form.sel = rowrow.isEdit = true}},