深圳线运营是网站建设,提升学历报名入口,网站开发外包合同范本,青海网站设计效果 完整代码见文末 实现思路 使用两个表单分别用于实现修改和新增处理。 通过一个editIndex变量判断是否是编辑状态来决定是否展示输入框#xff0c;当点击指定行的修改后进行设置即可#xff1a; el-table-columnv-for(column, index) in columns:key当点击指定行的修改后进行设置即可 el-table-columnv-for(column, index) in columns:keyindex:labelcolumn.label:propcolumn.propaligncentertemplate #default{ row, $index }div v-if$index editIndex classvalidate-infoel-form-item :propcolumn.propel-input v-modeleditRow[column.prop]//el-form-item/divspan v-elsespan{{ row[column.prop] }}/span/span/template
/el-table-columnedit(row, index) {if (this.editIndex -1) {this.$message.warning(请先完成修改中的行)return}this.editRow {...row}this.editIndex index
}通过隐藏表头实现新增表格和修改表格的合并同时表格数据只有addRow el-table :data[addRow] :show-headerfalse...
/el-table实现细节讲解 当无数据时只展示新增行 通过设置以下样式即可 /deep/ .el-table__empty-block {display: none;
}新增或者修改数据行时增加行高用于显示校验信息 行高通过以下样式进行控制不处于新增或者修改状态时设置为 0 即可 .add-table /deep/ .el-form-item {margin: 18px 0;
}为了在修改时只设置修改行的行高只需要只对输入框绑定样式即可 div v-if$index editIndex classvalidate-infoel-form-item :propcolumn.propel-input v-modeleditRow[column.prop]//el-form-item
/div完整代码
templatediv classappel-formrefeditableForm:modeleditRow:rulesruleslabel-width0:show-messagetrueclasseditable-tableel-table :datatableDatael-table-columnv-for(column, index) in columns:keyindex:labelcolumn.label:propcolumn.propaligncentertemplate #default{ row, $index }div v-if$index editIndex classvalidate-infoel-form-item :propcolumn.propel-input v-modeleditRow[column.prop]//el-form-item/divspan v-elsespan{{ row[column.prop] }}/span/span/template/el-table-columnel-table-column label操作 width200 aligncentertemplate #default{ row, $index }el-form-itemtemplate v-if$index editIndexel-button typesuccess sizemini plain clicksave保存/el-buttonel-button typeinfo sizemini plain clickcancel取消/el-button/templatetemplate v-elseel-buttontypeprimarysizeminiplainclickedit(row, $index)修改/el-buttonel-popconfirmtitle是否确认删除confirmdeleteRow($index)stylemargin-left: 10px;el-button slotreference typedanger sizemini plain删除/el-button/el-popconfirm/template/el-form-item/template/el-table-column/el-table/el-formel-formrefaddForm:modeladdRow:rulesruleslabel-width0:show-messagetrueclassadd-tableel-table :data[addRow] :show-headerfalseel-table-columnv-for(column, index) in columns:keyindex:labelcolumn.label:propcolumn.propaligncentertemplate #default{ row } classvalidate-infodiv classvalidate-infoel-form-item :propcolumn.propel-input v-modeladdRow[column.prop]//el-form-item/div/template/el-table-columnel-table-column label操作 width200px aligncentertemplate #default{ row }el-form-itemel-button typesuccess sizemini plain clickadd(row)新增/el-button/el-form-item/template/el-table-column/el-table/el-form/div
/templatescript
export default {data() {return {// 表格数据tableData: [{username: 张三,address: 北京},{username: 李四,address: 上海}],//配置列columns: [{label: 用户名,prop: username},{label: 地址,prop: address}],// 规则rules: {username: [{required: true, message: 请输入用户名, trigger: blur}],address: [{required: true, message: 请输入地址, trigger: blur}],},// 当前编辑行下标editIndex: -1,// 当前编辑行editRow: {username: ,address: },// 新增行addRow: {username: ,address: }}},methods: {save() {this.$refs.editableForm.validate((valid) {if (valid) {this.tableData.splice(this.editIndex, 1, { ...this.editRow })this.editIndex -1this.$message.success(修改成功)}return valid})},cancel() {this.editIndex -1},edit(row, index) {if (this.editIndex -1) {this.$message.warning(请先完成修改中的行)return}this.editRow {...row}this.editIndex index},add(row) {if (this.editIndex -1) {this.$message.warning(请先完成修改中的行)return}this.$refs.addForm.validate((valid) {if (valid) {this.addRow {}this.tableData.push({ ... row})this.$message.success(新增成功)}return valid})},deleteRow(index) {this.tableData.splice(index, 1)this.$message.success(删除成功!);}}
}
/scriptstyle scoped langless
.app {padding: 20px;/deep/ .el-form-item {margin-bottom: 0;}
}.validate-info {/deep/ .el-form-item {margin: 18px 0;}
}.editable-table {/deep/ .el-table__empty-block {display: none;}
}.editable-table, .add-table {width: 60%;margin: 0 auto;
}
/style
