效果
实现过程
关于表格行:是否处在可编辑状态主要取决于自定义的isInput
属性
关于取消操作:判断是新增row触发还是修改row触发主要决定于row的id
是否为0
dom部分:
<el-table :data="domainData" style="width: 100%">
<el-table-column label="域名">
<template slot-scope="scope">
<span v-if="scope.row.isInput">
<el-input size="small" placeholder="请输入域名" v-model="currentRow.name"/>
</span>
<span v-else>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column label="负责人">
<template slot-scope="scope">
<span v-if="scope.row.isInput">
<el-input size="small" placeholder="请输入负责人" v-model="currentRow.user"/>
</span>
<span v-else>{{ scope.row.user }}</span>
</template>
</el-table-column>
<el-table-column label="部门">
<template slot-scope="scope">
<span v-if="scope.row.isInput">
<el-select size="small" v-model="currentRow.department" placeholder="请选择部门" class="blue-theme">
<el-option
v-for="item in departmentList"
:key="item.id"
:label="item.name"
:value="item.name">
</el-option>
</el-select>
</span>
<span v-else>{{ scope.row.department }}</span>
</template>
</el-table-column>
<el-table-column label="作用">
<template slot-scope="scope">
<span v-if="scope.row.isInput">
<el-input size="small" placeholder="请输入备注" v-model="currentRow.describe"/>
</span>
<span v-else>{{ scope.row.describe }}</span>
</template>
</el-table-column>
<el-table-column label="操作" width="220">
<template slot-scope="scope">
<el-button
type="text"
@click="modifyChildDomain(scope.row, scope.$index)">{{ scope.row.isInput ? '保存' : "修改" }}</el-button>
<el-button
v-if="scope.row.isInput"
type="text"
@click="cancelChildDomain(scope.row, scope.$index)">取消</el-button>
<el-button
v-if="!scope.row.isInput"
type="text"
@click="delChildDomain(scope.row.id)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="add-child-domain" @click="addChildDomain"><span>+ 子域名</span></div>
data:
currentRow:用来保存当前编辑行的字段值
data() {
return {
domainData: [],
currentRow: null
}
},
methods部分:
// 添加子域名按钮触发
addChildDomain() {
for (let item of this.domainData) {
if (item.isInput) {
return this.$message.warning("请先保存当前编辑项");
}
}
let inputRow = { id: 0, "name": "", "user": "", "department": "", "describe": "", "isInput": true };
this.domainData.push(inputRow);
this.currentRow = JSON.parse(JSON.stringify(inputRow))
},
// 保存,修改子域名
modifyChildDomain(row, index) {
//点击修改 判断是否已经保存所有操作
for (let item of this.domainData) {
if (item.isInput && item.id != row.id) {
return this.$message.warning("请先保存当前编辑项");
}
}
// 保存 or 修改
if(row.isInput) {
if(!this.currentRow.name) {
return this.$message.warning("域名不能为空")
}
// 新增保存 or 修改保存
if(this.currentRow.id) {
// 修改保存ajax
...
} else {
// 新增保存ajax
...
}
} else {
this.currentRow = JSON.parse(JSON.stringify(row))
row.isInput = true
}
},
// 取消
cancelChildDomain(row, index) {
if (!this.currentRow.id) {
this.domainData.splice(index, 1);
}
return row.isInput = !row.isInput;
}
这是参考网上文章实现的,尊重原创