elementui增删改查,vue elementui 增删改查

　　这篇文章主要介绍了VUE元素实现增删改查的示例源码，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下

　　前言

　　最近因为一些原因，没有更博客，昨天老师布置了一个作业，用某视频剪辑软件实现增删改查功能，想想这也不难，就做一下试试吧。

　　因为自己写的样式没有别人做的好，因此我想用现成的用户界面框架，一直也没用过元素，就干脆趁机学一下吧。

　　实验步骤

　　首先引入一下元素的钢性铸铁以及射流研究…

　　！-引入样式-

　　link rel=样式表 href= https://un pkg。com/element-ui/lib/theme-粉笔/index。CSS rel=外部不跟随 rel=外部不跟随

　　！-引入组件库-

　　script src= https://UNP kg。com/element-ui/lib/index。js /脚本

　　然后引入需要用到的某视频剪辑软件相关的射流研究…文件

　　脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本

　　下面说一下超文本标记语言结构

　　div id=应用程序

　　氕职位的增删改查/h1

　　div class=head

　　el-row :gutter=20

　　el-col :span=6

　　El-input v-model= userinfo。name placeholder=请输入你的公司名/el-input

　　/el-col

　　el-col :span=6

　　El-input v-model= userinfo。位置 placeholder=请输入你的职位/el-input

　　/el-col

　　el-col :span=6

　　El-input v-model= userinfo。主要占位符=请输入你的专业/el-input

　　/el-col

　　el-col :span=6

　　El-input v-model= userinfo。数字 placeholder=请输入数量/el-input

　　/el-col

　　/el-row

　　El-button type= primary @ click= addUser class= add-BTN plain添加信息/el-button

　　/div

　　！-主体内容-

　　div class=body

　　模板

　　El-table:data= table data style= width:100%

　　埃尔-表格-列标签=序号宽度=180 模板slot-scope=“scope”{ scope .$index 1 }} /template/el表列

　　El-table-column prop= name label=公司名宽度= 180 /El-表格-列

　　埃尔-表格-列prop=position label=职位/El-表格-列

　　El-table-column prop= major label=专业/El-表格-列

　　埃尔-表格-列prop=number label=数量/El-表格-列

　　el-table-column prop=生日标签=操作

　　模板槽-范围="范围"

　　El-button type= primary icon= El-icon-edit @ click= editUser(scope。行，范围.$index)圆形/el按钮

　　El-button type= danger icon= El-icon-delete @ click= delUser(scope .$index)圆形/el按钮

　　/模板

　　/El-表格-列

　　/el-table

　　/模板

　　/div

　　！-编辑框-

　　el-dialog title=编辑用户信息：可见。sync=对话框可见 width= 30% :before-close=句柄关闭

　　差异

　　El-form ref= form :model= edit obj label-width= 80px

　　El-表单-项目标签=公司名El-input v-model= edit obj。名称/El-输入/El-表单-项目

　　El-表单-项目标签=职位El-input v-model= edit obj。位置/El-输入/El-表单-项目

　　El-表单-项目标签=专业El-input v-model= edit obj。主要/El-输入/El-表单-项目

　　El-表单-项目标签=数量El-input v-model= edit obj。数字/El-输入/El-表单-项目

　　/el格式

　　/div

　　span slot=页脚 class=对话框-页脚

　　El-button @ click=对话框可见=假取消/el-button

　　El-button type= primary @ click= confirm 确定/el-button

　　/span

　　/el-dialog

　　/div

　　这一段是元素的表单以及编辑等样式，其中添加了一些点击操作后面需要用到

　　加上基础的样式

　　风格

　　#app{

　　宽度：1024像素

　　边距：0自动；

　　}。add-btn{

　　边距-顶部：20px

　　宽度：100%;

　　}。正文{

　　边距-顶部：20px

　　}

　　/风格

　　现在页面的基本样式就做好了，如下图所示：

　　下面开始写某视频剪辑软件代码，对各个功能进行处理操作

　　了解过vuejs的人应该知道这个结构：数据是用我们获得的数据填充的，定义了一些规则，我们的操作是在方法中执行的。

　　新Vue({

　　埃尔： #app ，

　　数据：{}，

　　方法：{}

　　})

　　数据：函数(){

　　返回{

　　用户信息：{

　　名称：，

　　位置： ，

　　少校： ，

　　号码： ，

　　},

　　表数据：[{

　　名称：互联网学院，

　　职位：“专任教师”，

　　专业：“对外贸易”，

　　编号：“2”，

　　},{

　　名称：徐州重工，

　　职位： R&D工厂汽车部工程师，

　　专业：精密机械制造，

　　数字：“12”，

　　},{

　　名称：北京青马科技，

　　职位：“前端开发工程师”，

　　少校：“Vue，React”，

　　数字：“4”，

　　}

　　],

　　dialogVisible: false，

　　editObj:{

　　名称：，

　　位置： ，

　　少校： ，

　　号码： ，

　　},

　　用户索引：0，

　　}

　　},

　　接下来，让我们添加方法

　　AddUser()是添加数据。

　　DelUser()是删除数据。

　　Edit()正在编辑数据。

　　HandleClose()是编辑框是否弹出。

　　Confirm()是确认信息并将数据传递到表中。

　　在添加模块中，我做了信息判断。如果信息为空，会弹出提示框，显示的信息不能为空。

　　在删除模块中，点击可以删除一行信息。

　　在修改模块中，你会先获取原始信息，然后修改你需要修改的信息。

　　方法：{

　　//添加

　　addUser(){

　　如果(！this.userInfo.name){

　　这个。$message({

　　消息：“请输入您的公司名称！”,

　　});

　　返回；

　　}

　　如果(！this.userInfo.position){

　　这个。$message({

　　信息：“请输入您的位置！”,

　　类型：“警告”

　　});

　　返回；

　　}

　　如果(！this.userInfo.major) {

　　这个。$message({

　　消息：“请输入您的专业！”,

　　类型：“警告”

　　});

　　返回；

　　}

　　如果(！this.userInfo.number) {

　　这个。$message({

　　消息：“请输入数量！”,

　　类型：“警告”

　　});

　　返回；

　　}

　　this . table data . push(this . userinfo)；

　　this.userInfo={

　　名称：，

　　位置： ，

　　少校： ，

　　号码： ，

　　};

　　},

　　//删除

　　去色器(idx){

　　这个。$confirm(您确定要删除此用户信息吗？)。然后(_={

　　this.tableData.splice(idx，1)；

　　})。catch(_={ })；

　　},

　　//编辑

　　editUser(item，idx){

　　this.userIndex=idx

　　this.editObj={

　　名称：项目名称，

　　位置：item.position，

　　专业：item.major，

　　编号：item.number，

　　};

　　this.dialogVisible=true

　　},

　　handleClose(){

　　this.dialogVisible=false

　　},

　　确认(){

　　this.dialogVisible=false

　　Vue.set(this.tableData，this.userIndex，this . edit obj)；

　　}

　　},

　　})

　　总结：

　　通过这个练习，我知道了如何使用元素框架。在元素框架里写代码和样式真的很方便。以后有什么低需求的作业可以用？目前我还是个学生，写代码的能力和文笔还需要练习。

　　最后：附上整个项目的源代码。本项目仅供学习交流。

　　源代码

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8

　　meta name= viewport content= width=device-width，initial-scale=1.0

　　meta http-equiv= X-UA-Compatible content= ie=edge

　　link rel=样式表 href= https://un pkg。com/element-ui/lib/theme-粉笔/index。CSS rel=外部不跟随 rel=外部不跟随

　　titleVue增删改查/标题

　　风格

　　#app{

　　宽度：1024像素

　　边距：0自动；

　　}。add-btn{

　　边距-顶部：20px

　　宽度：100%;

　　}。正文{

　　边距-顶部：20px

　　}

　　/风格

　　/头

　　身体

　　div id=应用程序

　　氕职位的增删改查/h1

　　div class=head

　　el-row :gutter=20

　　el-col :span=6

　　El-input v-model= userinfo。name placeholder=请输入你的公司名/el-input

　　/el-col

　　el-col :span=6

　　El-input v-model= userinfo。位置 placeholder=请输入你的职位/el-input

　　/el-col

　　el-col :span=6

　　El-input v-model= userinfo。主要占位符=请输入你的专业/el-input

　　/el-col

　　el-col :span=6

　　El-input v-model= userinfo。数字 placeholder=请输入数量/el-input

　　/el-col

　　/el-row

　　El-button type= primary @ click= addUser class= add-BTN plain添加信息/el-button

　　/div

　　！-主体内容-

　　div class=body

　　模板

　　El-table:data= table data style= width:100%

　　埃尔-表格-列标签=序号宽度=180 模板slot-scope=“scope”{ scope .$index 1 }} /template/el表列

　　El-table-column prop= name label=公司名宽度= 180 /El-表格-列

　　埃尔-表格-列prop=position label=职位/El-表格-列

　　El-table-column prop= major label=专业/El-表格-列

　　埃尔-表格-列prop=number label=数量/El-表格-列

　　el-table-column prop=生日标签=操作

　　模板槽-范围="范围"

　　El-button type= primary icon= El-icon-edit @ click= editUser(scope。行，范围.$index)圆形/el按钮

　　El-button type= danger icon= El-icon-delete @ click= delUser(scope .$index)圆形/el按钮

　　/模板

　　/El-表格-列

　　/el-table

　　/模板

　　/div

　　！-编辑框-

　　el-dialog title=编辑用户信息：可见。sync=对话框可见 width= 30% :before-close=句柄关闭

　　差异

　　El-form ref= form :model= edit obj label-width= 80px

　　El-表单-项目标签=公司名El-input v-model= edit obj。名称/El-输入/El-表单-项目

　　El-表单-项目标签=职位El-input v-model= edit obj。位置/El-输入/El-表单-项目

　　El-表单-项目标签=专业El-input v-model= edit obj。主要/El-输入/El-表单-项目

　　El-表单-项目标签=数量El-input v-model= edit obj。数字/El-输入/El-表单-项目

　　/el格式

　　/div

　　span slot=页脚 class=对话框-页脚

　　El-button @ click=对话框可见=假取消/el-button

　　El-button type= primary @ click= confirm 确定/el-button

　　/span

　　/el-dialog

　　/div

　　脚本src= https://cdn。jsdelivr。net/NPM/vue/dist/vue。js /脚本

　　script src= https://UNP kg。com/element-ui/lib/index。js /脚本

　　脚本

　　新Vue({

　　埃尔： #app ，

　　数据：函数(){

　　返回{

　　用户信息：{

　　名称：,

　　位置： ,

　　少校： ,

　　号码： ,

　　},

　　表数据：[{

　　名称：互联网学院，

　　位置： 专职教师，

　　少校： 对外贸易，

　　编号："2",

　　},{

　　名称：徐州重工，

　　位置： 工厂车研发部工程师，

　　少校： 精密机械制造，

　　数字："12",

　　},{

　　名称：北京青码科技，

　　位置： 前端开发工程师，

　　少校：“Vue，反应过来”，

　　数字："4",

　　}

　　],

　　dialogVisible: false，

　　editObj:{

　　名称：,

　　位置： ,

　　少校： ,

　　号码： ,

　　},

　　用户索引：0,

　　}

　　},

　　方法：{

　　//添加

　　addUser(){

　　如果(!this.userInfo.name){

　　这个消息({

　　消息： 请输入你的公司名!,

　　});

　　返回；

　　}

　　如果(!this.userInfo.position){

　　这个消息({

　　消息： 请输入你的职位!,

　　类型："警告"

　　});

　　返回；

　　}

　　如果(!this.userInfo.major) {

　　这个消息({

　　消息： 请输入你的专业!,

　　类型："警告"

　　});

　　返回；

　　}

　　如果(!this.userInfo.number) {

　　这个消息({

　　消息： 请输入数量!,

　　类型："警告"

　　});

　　返回；

　　}

　　这个。表格数据。推(这个。userinfo)；

　　this.userInfo={

　　名称：,

　　位置： ,

　　少校： ,

　　号码： ,

　　};

　　},

　　//删除

　　去色器(idx){

　　这个. $确认(确认删除此用户信息？)。然后(_={

　　this.tableData.splice(idx，1)；

　　})。catch(_={ })；

　　},

　　//编辑

　　editUser(item，idx){

　　this.userIndex=idx

　　this.editObj={

　　名称：项目名称，

　　位置：项目.位置，

　　专业：item.major

　　编号：项目.编号，

　　};

　　this.dialogVisible=true

　　},

　　handleClose(){

　　this.dialogVisible=false

　　},

　　确认(){

　　this.dialogVisible=false

　　Vue.set(this.tableData，this.userIndex，this。编辑obj)；

　　}

　　},

　　})

　　/脚本

　　/body

　　/html

　　以上就是VUE元素实现增删改查的示例源码的详细内容，更多关于VUE元素实现增删改查的资料请关注我们其它相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。