先看效果图：最右侧加号按钮可在下方列表添加一行空数据，同时在后面放一个保存按钮，可在列里进行下拉框和输入框等操作，选择好，填好数据，点击后面的保存按钮即可保存调用后端接口即可保存当前数据！
Html代码：
<!-- 下面表格数据，添加操作区 -->
<el-table :data="standardTable" stripe style="width: 100%" max-height="750" border>
<el-table-column type="index" label="序号" width="60" align="center">
</el-table-column>
<el-table-column prop="mainTable" label="标准表表名" width="150" align="center">
</el-table-column>
<el-table-column prop="mainTableColumn" label="表属性">
<!-- 下面的内容如果是通过js新添加的没有id则让他能够进行选择，保存后会有id属性的把这个选择框禁用掉 -->
<template slot-scope="scope">
<el-select style="width:100%" v-model="scope.row.mainTableColumn" filterable :disabled="scope.row.id ? true : false" clearable placeholder="请选择">
<el-option v-for="item in standardProps" :key="item.value" :label="item.tableColumn" :value="item.tableColumn">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="sonTable" label="目标表表名" width="200" align="center">
</el-table-column>
<el-table-column prop="sonTableColumn" label="表属性">
<!-- 下面的内容如果是通过js新添加的没有id则让他能够进行选择，保存后会有id属性的把这个选择框禁用掉 -->
<template slot-scope="scope">
<el-select style="width:100%" v-model="scope.row.sonTableColumn" filterable :disabled="scope.row.id ? true : false" clearable placeholder="请选择">
<el-option v-for="item in targetProps" :key="item.value" :label="item.tableColumn" :value="item.tableColumn">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column prop="isDict" label="是否字典" width="100" align="center">
<!-- 下面的内容如果是通过js新添加的没有id则让他能够进行选择，保存后会有id属性的把这个选择框禁用掉 -->
<template slot-scope="scope">
<el-switch :active-value="1" :inactive-value="0" :disabled="scope.row.id ? true : false" v-model="scope.row.isDict"></el-switch>
</template>
</el-table-column>
<el-table-column prop="sonSelect" label="子查询语句" width="200">
<!-- 下面的内容如果是通过js新添加的没有id则让他能够进行选择，保存后会有id属性的把这个选择框禁用掉 -->
<template slot-scope="scope">
<el-input v-model="scope.row.sonSelect" :disabled="scope.row.id ? true : false"></el-input>
</template>
</el-table-column>
<el-table-column width="150" align="center">
<!-- 下面：有id则让它能够删除，没有id就只让它保存就好（有其它需求的也可以做修改） -->
<template slot-scope="scope">
<el-button type="success" v-if="!scope.row.id" @click="addSynTableRelation(scope.row)" style="min-width:60px">保存</el-button>
<!-- 删除做了是否确认删除验证 -->
<el-popconfirm v-else title="确定删除吗？" @onConfirm="deleteTableRelation(scope.row)">
<el-button type="danger" slot="reference" style="min-width:60px">删除</el-button>
</el-popconfirm>
</template>
<template slot="header">
<!-- 通过js添加行数据的按钮 -->
<el-button type="primary" @click="addRow()" class="el-icon-plus" style="min-width:50px"></el-button>
</template>
</el-table-column>
</el-table>data()中定义的一些全局变量：
data(){
return{
//标准表
standardTable: [],
//下拉框的数据源
standardProps:[],
//下拉框数据源2
targetProps:[]
}
}js代码：（methods中）
//添加一个空行，某个字段需要提前复制的话可在下面添加时直接复制即可
addRow() {
//我选择unshift方法，一直往第一行添加
this.standardTable.unshift({
area: this.currentArea,
areaName: "",
isDict: "",
mainTable: "",
mainTableColumn: "",
mainTableColumnShow: "",
sonTable: "",
sonTableColumn: "",
sonTableColumnShow: "",
updateDate: ""
})
},
//新增前置库关系规则接口
addSynTableRelation(value) {
//console.log(value);
//调用我后端保存当前行数据的的接口
API.addSynTableRelation(value).then(res => {
console.log(res);
if (res.status === 1) {
this.$message.success("成功！")
//下面是成功后我调用查询列表的方法，把数据重新赋值回去
this.searchTable()
}
})
},
//删除置库关系规则接口
deleteTableRelation(value) {
//console.log(value);
//下面是我删除的调用后端接口
API.delSynTableRelation({
id: value.id,
}).then(res => {
if (res.status === 1) {
this.$message.success("成功！")
//下面是成功后我调用查询列表的方法，把数据重新赋值回去
this.searchTable()
}
})
},以上只是我的业务代码，可以根据自己的需求去调整修改的！如有错误请及时指正
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
