效果实现:
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" filterable
class="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 = row
row.isEdit = true
}
},