el-table表单实现点击编辑按钮对内容进行编辑
话不多说,先上效果图
这里我将按钮绑定了dialog对话框,避免直接在原有表行之间进行修改,因为后台管理系统多是响应式布局,使用dialog对话框可以更直观的让用户对内容进行编辑,而对于在原有表行中进行编辑,可能会因为窗口的大小造成编辑上的不便,这仅是个人理解
下面上代码
首先在表行中的el-button绑定el-dialog对话框
在饿了么的开发文档上写的很清晰,使用visible
<el-dialog id="edit" title="数据产品目录名称" :visible.sync="editOn">
来控制dialog对话框的显隐,首先在data中声明editOn为false,即dialog对话框不显示
editOn: false,
之后在按钮上绑定点击事件,使这个值变为true即可显示
<el-button type="primary" size="small" @click="handleEdit(scope.$index,scope.row), editOn = true">
handleEdit中分别传入的是当前行的下标和本行数据
这里scope.row传入的是一个Object对象,可以自行打印看下,然后将其中的每一项数据双向绑定到dialog对话框里面的form表单下的input框中
<el-dialog id="edit" title="数据产品目录名称" :visible.sync="editOn">
<el-form :model="dialogData" label-width="120px" ref="dialogData">
<el-form-item label="上级产品目录">
<el-input v-model="dialogData.upperStory" disabled></el-input>
</el-form-item>
<el-form-item
label="产品目录名称"
prop="data"
:rules="{ required: true, message: '所填内容不可为空' }"
>
<el-input v-model="dialogData.data" auto-complete="off"></el-input>
</el-form-item>
<el-form-item
label="目录编码"
prop="code"
:rules="{ required: true, message: '所填内容不可为空' }"
>
<el-input v-model="dialogData.code" ></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="dialogData.num" disabled></el-input>
</el-form-item>
<el-form-item
label="描述"
prop="description"
:rules="{ required: true, message: '所填内容不可为空' }"
>
<el-input v-model="dialogData.description" type="textarea"></el-input>
</el-form-item>
<el-form-item style="text-align: right;">
<el-button size="small" @click=" editOn = false " type="primary">取消</el-button>
<el-button size="small" @click="CheckValid()" type="primary">保存</el-button>
</el-form-item>
</el-form>
</el-dialog>
由于点击取消按钮将不会对数据有任何影响,所以只是起到一个关闭dialog对话框的效果,直接editOn = false就好
而保存按钮需要做一些逻辑的处理,首先给定了表单的ref值:dialogData
下面直接看CheckValid方法
CheckValid () {
this.$refs.dialogData.validate((valid) => {
if (valid) {
this.tableData[this.index].data = this.dialogData.data
this.tableData[this.index].code = this.dialogData.code
this.tableData[this.index].description = this.dialogData.description
this.editOn = false
} else {
alert('编辑内容有误,请您检查提示信息并重新编辑后提交')
return false
}
})
}
validate方法必须是要含有表单验证,即上面代码中的:rule规则,valid表示如果是有效的即做以下的行为。
好啦,代码写到这里功能就实现啦!是不是很简单
如果有更为简洁更好的方法望大佬不吝赐教,我是一只刚刚踏入前端的小菜鸡- -、