当前位置：首页 > news >正文

vue elementui el-table实现增加行，行内编辑修改

news 2025/7/5 5:39:30

需求：
前端进行新增表单时，同时增加表单的明细数据。明细数据部分，可进行行编辑。
效果图：
在这里插入图片描述

在这里插入图片描述

        <el-card><div slot="header"><span style="font-weight: bold">外来人员名单2</span><el-buttonstyle="float: right"type="primary"@click="insertDetailRow">添加</el-button></div><el-tableref="detailTable"align="center"highlight-cellkeep-sourcestripeborderstyle="width: 100%"max-height="400":data="detailTableData"><el-table-column prop="userName" label="姓名" align="center"><template slot-scope="{ row, $index }"><span v-if="!showEdit[$index]">{{ row.userName }}</span><el-inputv-model="detailTableData[$index].userName"v-if="showEdit[$index]"placeholder="请输入姓名"></el-input></template></el-table-column><el-table-column prop="sex" label="性别" align="center"><template slot-scope="{ row, $index }"><span v-if="!showEdit[$index]">{{ row.sex }}</span><el-selectv-model="detailTableData[$index].sex"v-if="showEdit[$index]"placeholder="请选择性别"><el-optionv-for="item in sexs":label="item.label":value="item.value"></el-option></el-select></template></el-table-column><el-table-column prop="telPhone" label="手机号" align="center"><template slot-scope="{ row, $index }"><span v-if="!showEdit[$index]">{{ row.telPhone }}</span><el-inputv-model="detailTableData[$index].telPhone"v-if="showEdit[$index]"placeholder="请输入手机号"/></template></el-table-column><el-table-column label="操作" align="center" width="220"><template slot-scope="{ row, $index }"><el-buttonv-if="!showEdit[$index]"@click="editDetailRow($index, row)"type="primary"icon="el-icon-edit"circle/><el-buttonv-if="showEdit[$index]"@click="confirmDetailRow($index, row)"type="success"icon="el-icon-check"circle/><el-buttonv-if="!showEdit[$index]"@click="removeDetailRow($index, row)"type="danger"icon="el-icon-delete"circle/></template></el-table-column></el-table></el-card>export default {data() {return {detailTableData: [],   showEdit: [], //控制显示及隐藏sexs: [{ label: '女', value: '女' }, { label: '男', value: '男' }]}},methods: {//添加一行insertDetailRow() {console.info(this.detailTableData)if (this.detailTableData != null && this.detailTableData.length > 0) {if (this.detailTableData[this.detailTableData.length - 1].userName === null ||this.detailTableData[this.detailTableData.length - 1].userName === undefined ||this.detailTableData[this.detailTableData.length - 1].userName.length <= 0) {this.$message({ type: 'error', message: '请将数据填写完整后再新增数据行!' })return false}//现有行取消编辑 this.detailTableData.forEach((ele, i) => {this.$set(this.showEdit, i, false)})}var obj = {userName: '',sex: '',telPhone: ''}this.detailTableData.push(obj)},// 编辑一行editDetailRow(index, row) {this.$set(this.showEdit, index, true)},// 确认编辑confirmDetailRow(index, row) {this.$set(this.showEdit, index, false)},//删除一行removeDetailRow(index, row) {this.$confirm('此操作将永久删除当前信息, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',center: true}).then(() => {this.detailTableData.splice(index, 1)}).catch(() => {this.$message({type: 'info',message: '已取消删除'})})}}
}