【Vue-Element UI】表单元素以及表格内项目的添加、修改及删除

翘阳啦

于 2022-06-13 11:12:56 发布

阅读量2.1k

点赞数 6

分类专栏： Vue项目开发文章标签： vue.js ui elementui 前端 javascript

本文链接：https://blog.youkuaiyun.com/qiaoyangla/article/details/125255748

版权

本文介绍了如何使用Vue结合Element UI库实现表单元素的添加、修改和删除功能。详细讨论了Dialog对话框的使用，品牌logo的上传功能，以及MessageBox弹框在删除操作中的应用。内容涵盖了Form组件的表单验证规则，数据绑定以及API接口调用的相关方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

完成品牌的添加、修改和删除操作

添加品牌的表单界面，点击添加按钮，出现Dialog对话框，品牌logo部分采用了upload上传

点击修改也会出现上面的对话框，点击删除按钮，出现下面的MessageBox弹框

具体代码

<!-- 对话框 -->
    <el-dialog :title="tmForm.id?'修改品牌':'添加品牌'" :visible.sync="dialogFormVisible">
      <!-- form表单 v-model属性作用是吧表单的数据收集到哪个对象上，将来进行表单验证，也需要这个属性-->
      <el-form style="width:80%" v-model="tmForm" :rules="rules" ref="ruleForm">
        <el-form-item label="品牌名称"  label-w