vue elementui增删改查,elementui表格增删改查
这篇文章主要介绍了某视频剪辑软件使用元素实现增删改查打包的步骤，帮助大家更好的理解和学习某视频剪辑软件框架，感兴趣的朋友可以了解下
在我们进行项目开发期间，避免不了使用各式各样的组件，元素是由饿了么公司前端团队开源。样式精美、组件齐全、易于上手。
效果：
组件使用
我们利用脚手架创建一个项目，然后只需要安装元素-用户界面即可
安装：国家预防机制一元素-ui -S
然后在主页。射流研究…中引用一下样式即可，可以选择按需加载，我们这边因为是演示一下，所以不去进行调整，项目中如果使用到的组件不多，可以选择按需加载。
主页。射流研究…
从“Vue”导入Vue
从导入应用程序. 1/app。vue ；
从"元素-用户界面"导入ElementUI
导入“元素-ui/lib/主题-粉笔/索引。CSS”；
vue。配置。生产提示=假；
vue。使用(元素ui)；
新Vue({
render: h=h(App)，
}).$ mount("# app ")
然后我们在src/组件下新建一个组件，用来写我们的展示组件，然后在app.vue中导入即可
app.vue
模板
div id=应用程序
创建者内容1=憧憬/
/div
/模板
脚本
从导入创建者。/组件/创建者/创建者；
导出默认值{
名称："应用程序",
组件：{
创造者
}
}
/脚本
我们首先先使用表格，将数据展示出来
Creator.vue
模板
div class=Creator
el-row :gutter=20
el-col :span=6
埃尔-输入v-model=content placeholder=请输入内容/el-input
/el-col
el-col :span=2
埃尔按钮类型="主要"搜索/el-button
/el-col
/el-row
div style=height: 20px/
El-row:gutter= 10 type= flex justify= center
el-col :span=14
埃尔表
:data=tableData //声明列表使用的数据
:key=zip //声明每一行的键
边界
style=宽度：100%
埃尔-表格-列
固定的；不变的
prop=date
标签=日期
宽度=150
/El-表格-列
埃尔-表格-列
prop=name //对应列表数据里面的需要展示的键
标签=姓名
宽度=120
/El-表格-列
埃尔-表格-列
省
标签=省份
宽度=120
/El-表格-列
埃尔-表格-列
prop=城市
标签=市区
宽度=120
/El-表格-列
埃尔-表格-列
prop=地址
标签=地址
宽度=300
/El-表格-列
埃尔-表格-列
prop=zip
标签=邮编
宽度=120
/El-表格-列
埃尔-表格-列
固定=右
标签=操作
宽度=160
v-slot=scope //获取每一行的数据
模板
El-button @ click= handle create(范围。row) type= text size= small 添加/el-button
埃尔-波普确认
confirmButtonText=好的
cancelButtonText=不用了
icon=el-icon-info
iconColor=red
title=这是一段内容确定删除吗？
@ on confirm=句柄删除(范围。行)
埃尔按钮slot= reference type= text size= small 删除/el-button
/el-popconfirm
/模板
/El-表格-列
/el-table
/el-col
/el-row
el-dialog title=添加用户：可见。sync= dialogFormVisible
//规则指定表单验证规则
El-form:model= form status-icon ref= rule form :rules= rules :label-position= right
el-row :gutter=10
el-col :span=11
el-form-item prop=name label=姓名：label-width=formLabelWidth
El-input style= width:200 px v-model= form。name autocomplete= off /El-input
/El-表单-项目
/el-col
/el-row
el-row :gutter=10
el-col :span=11
埃尔-表单-项目
prop=dates //需要验证的字段需要对应规则里面的键
标签=日期
:label-width=formLabelWidth
:rules=[
{必需：真，消息： 必须选择一个日期，触发：模糊 },
] //也可以直接写在项目里面验证也可以全放在规则。我这里是采取了两种方式
埃尔-日期选择器
v-model=form.dates
align=右
type=date
占位符=选择日期
format=yyyy年梅智节拍器月截止日期(截止日期的缩写)日 //展示数据的格式
value-format=yyyy-MM-dd //声明点击后的数据格式
:picker-options=pickerOptions
/El-日期选择器
/El-表单-项目
/el-col
/el-row
/el格式
div slot=footer class=对话框-页脚
El-button @ click= dialogFormVisible=false 取消/el-button
El-button type= primary @ click= onOk 确定/el-button
/div
/el-dialog
/div
/模板
脚本
导出默认值{
道具：{
内容1:{必需：真的，类型：String}
},
data() {
//自定义验证函数给名字验证
const validatName=(规则，值，回调)={
如果(!值)返回回调（新错误(名字不能为空));
if (value.length=0)返回回调（新错误(最少一个字符));
返回回调();
};
返回{
内容：this.content1，
表格数据：[
{
日期："2016年5月2日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1518 弄，
邮政编码：200331
}, {
日期："2016年5月四日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1517 弄，
邮政编码：200332
}, {
日期："2016年5月一日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1519 弄，
邮政编码：200333
}, {
日期："2016年5月3日",
名称： 王小虎，
省： 上海，
城市： 普陀区，
地址： 上海市普陀区金沙江路1516 弄，
邮政编码：200334
}],
formLabelWidth:"120像素",
//控制模态是否展示
dialogFormVisible: false，
表单：{
名称： ,
日期：空，
},
//对采摘者组件的扩展
建议：{
//将之后的时间禁用不然选择
禁用日期（时间){
返回时间。gettime()日期。now()；
},
//增加今天昨天一周前的快速选项
快捷方式：[{
文本： 今天，
onClick(选取器){
提货人. emit(pick ，new Date())；
}
}, {
文本： 昨天，
onClick(选取器){
const Date=new Date()；
约会。settime(日期。gettime()-3600 * 1000 * 24)；
提货人$emit(pick ，date)；
}
}, {
文本： 一周前，
onClick(选取器){
const Date=new Date()；
约会。settime(日期。gettime()-3600 * 1000 * 24 * 7)；
提货人$emit(pick ，date)；
}
}]
},
//定义输入规则
规则：{
名称：[
//指定验证函数的触发时间。这是焦点丢失触发器。
{验证程序：验证名称，触发器：模糊 }
],
},
};
},
方法：{
onOk() {
//用ref验证。传入进行验证的函数返回一个布尔值，表明验证是否成功。
这个。$refs[ruleForm]。验证((有效)={
如果(有效){
常数{
姓名，
日期
}=this .表单；
//避免在zip中重复zip
const maxZip=Math.max(.this . table data . map(item=item . zip))1；
const obj={
姓名，
日期：日期，
省份：“北京”，
城市：普陀区，
地址：“上海市普陀区金沙江路1518弄”，
zip: maxZip
};
//推入数据
this . tabledata . push(obj)；
//隐藏模式
this.dialogFormVisible=false
}否则{
返回false
}
});
},
//删除数据
handleDelete(row) {
this.tableData.map((item，index)={
if (item.zip===row.zip) {
this.tableData.splice(index，1)；
}
});
},
handleCreate() {
//模态显示
this.dialogFormVisible=true
}
}
};
/脚本
一组基本的添加、删除和更改就可以了。Vue有一套现成的管理模板。Vue-element-admin很不错，可以用一段时间。
打包
如果默认打包，静态资源的引用会有问题，会是空白的，所以我们需要在打包前配置好静态资源。
在与package.json相同级别的目录中，创建一个新的vue.config.js并添加以下配置
/**
*由视觉创造
*/
模块.导出={
公共路径：“”。////静态资源目录被配置为。/当前目录。
};
这是vue使用Element实现添加、删除、检查和打包的详细步骤。更多关于Vue的添加、删除、检查和打包的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。