在el-table表格中直接进行编辑新增操作,不单独出弹窗。
<el-table-column label="海区" align="center">
<template slot-scope="scope">
<el-form-item :prop="'seaData.' + scope.$index + '.seaAreaName'"
:rules="seaList.rules.seaAreaName">
<span v-if="(scope.row.isEdit)" class="red-sea">*</span>
<el-input size="mini" v-if="(scope.row.isEdit)" v-model.trim="scope.row.seaAreaName"
clearable maxlength="30" placeholder="请输入海区" />
<span v-else v-text="scope.row.seaAreaName"></span>
</el-form-item>
</template>
</el-table-column>
<el-table-column align='center' label="操作" fixed="right">
<template slot-scope="scope">
<!-- <el-button @click="handleSeaView(scope.row.id)" type="text" size="small">详情</el-button> -->
<el-button v-if="(scope.row.isEdit)" @click="handleSeaSave(scope.row)" type="text"
size="small">保存</el-button>
<el-button v-else @click="handleSeaEdit(scope.row)" type="text" size="small">编辑</el-button>
<el-button v-if="(scope.row.isEdit)" @click="handleSeaCancel(scope.row)"
style="color: gray;" type="text" size="small">取消</el-button>
<el-button v-else @click="handleSeaDel(scope.row.id)" style="color: red;" type="text"
size="small">删除
</el-button>
</template>
</el-table-column>
新增时,在当前数据中最前面添加一条数据
this.seaList.seaData.unshift({
seaAreaName: '',
isEdit: true //判断是否是输入框
})