console.log(this.$parent.tabelRenderEvent)
2020.05.15 总结:
查询
:label-position=“labelPosition”
:inline=“true” 设置 inline
属性可以让表单域变为行内的表单域
关键点: el-form 中加上 :rules=“rules” ,ref=“ruleForm” 节点 data中准备规则。
提交按钮 this.$refs[formName].validate((valid) 方法, 全部符合规则,返回一个valid true。
在true中, 执行接口访问。
重置按钮: this.$refs[formName].resetFields(); 。
prop=“名字” 和v-model 中的名字保持一致。( 如果不一致, 恢复按钮无效。)
检测: :rules=“rules” 不加, 提交都返回true . 重置按钮 恢复初始状态值。
加上 :rules=“rules” 提交按钮,自动检测规则。 规则中没有对应项,不检测。
prop与规则无对应, 提交不检测。 props与规则对应但是与data不对应,提交检测,但是恢复无效。 所以,规则名字, prop名字,和data中的名字 保持对应。 提交和恢复都会有效。
mounted:function(){
throw Error('I was created using a function call!');
}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ov3aWu8-1600870725428)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597505875896.png)]
console.warn(’[Element Warn]please pass correct props!’); 打印一个提醒
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HDim5Pnw-1600870725432)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597506152382.png)]
只要,对应好value, 自动回显。 涉及到的就是,如果值不对,需要更改为vuleu取值的类型。
blockupReason: "08", // 阻断原因分类
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MMcRUDn4-1600870725435)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1598024433728.png)]
第二种:情况
下拉框无法回显,原因是, 数字好字符串的原因;
选中时保存的字符串形式的数字,那么回显时,也要是字符串式的数字。
isBlockupTotal: "1", // 是否完全中断
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GSCmXgFd-1600870725454)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1598026326508.png)]
黄金糕
{
{ item.fdDescription }}
这是一个回调事件,接受点击的值。
handleCommand(a) { // 添加按钮
this.resourceList1.push( { inputCategory: "1", resourceType: a, num: "" })
},
弹窗中的 悬浮下拉组件,下拉项使用v-for循环, 下拉数据 在父组件打开是执行了一次,在弹窗打开时,又执行了一次。 导致下拉数据为空。
处理: 弹窗打开执行去掉。正常。
this.$message({
type: "success",
message: "成功!",
});
//文件下载
// 入参 file:被下载文件对象
fileDownload(file) {
const loading = this.$loading({
lock: true,
text: "导出中",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
// ------
this.$axios({
url:
this.$zjyhPath +
"/yhEvent/downloadFile?fdObjectid=" +
file.fdObjectid,
method: "get",
timeout: 180000,
responseType: "blob",
})
.then((res) => {
// 定义文件名等相关信息
loading.close();
const blob = res.data;
if ("download" in document.createElement("a")) {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = (e) => {
const a = document.createElement("a");
var date = moment().format("YYYY-MM-DD hh:mm:ss");
a.download = `${file.name}${date}${file.fileext}`;
document.body.appendChild(a);
a.href = URL.createObjectURL(blob);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
};
} else {
navigator.msSaveBlob(blob, `${file.name}${date}${file.fileext}`);
}
})
.catch(() => {
loading.close();
});
},
上传:
this.handleForm.handleFiles.forEach((item) => {
params.append("files", item.raw);
});
项目ajax请求失败优化方案:
if (code === 200) {
this.tableData = res.data.resultData.dataList;
this.total = res.data.resultData.total;
} else {
this.$message.error("查询失败");
}
Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。由饿了么公司前端团队开源。
特性:
一致性 Consistency
反馈 Feedback
效率 Efficiency
可控 Controllability
npm i element-ui -S
在 main.js 中写入以下内容:
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
Vue.use(ElementUI)
new Vue({
el: '#app',
render: h => h(App)
})
初始化,引入,所有组件即可以使用。
layou标签至于form标签内,不影响验证功能。
{
{ this.tabellistdata.roadInfo}}
{
{ this.tabellistdata.roadSectionCode}}
默认按钮
主要按钮
成功按钮
信息按钮
警告按钮
危险按钮
注意点: el-button 控制基本样式 type=“danger” 控制样式 就是颜色
使用注意事项: layout布局只控制屏幕占比。 边距和边框。 在内部加盒子控制。
格栅布局主要就是行和列的布局
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cp3KYVvp-1600870725455)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1596969010688.png)]
:gutter=“10” 栅格间隔 作用是 父盒子两侧 加margin -5 子盒子 两侧加pdding -5 px
行标签上还可以设置 flex ,当父盒子 高度比较大时, 控制子盒子上对其,或者是下对齐。
1 注意: 这只是控制宽度。 高度有子盒子的高撑起来。 2 表示 margin-left: 25%; 盒子向右侧推出指定距离。 3. 栅格向右移动格数 推 4 栅格向左移动格数 拉 快速搭建标准的后台管理系统的 三分布局 四种标准颜色 只是16进制的色值 直接通过设置类名为 通过i 标签, 或者是 el- 的标签内设置 icon=“el-icon-d-arrow-right”。 class名按需查找。 主要按钮 搜索 解析会加上class名 就是a 标签 属性有 基础用法 由于选项默认可见,不宜过多,若选项过多,建议使用 Select 选择器。 要使用 Radio 组件,只需要设置 总结: 使用el 标签, 绑定变量。 data 配置项中给个绑定值。 label控制 值是什么。 单选框不可点击的状态。 但可以赋予初始值,选中。 打组使用。 在 Form 组件提供了表单验证的功能,只需要通过 01 表单验证中,item如果v-if =false 。 节点从页面去掉。验证通过。 02 案例:下面是循环的其中一项item . 关键点是 prop=“res_form.rateTemplateList[index].templateId” 动态指定值。 :rules=‘res_formRules.templateId’ 动态绑定规则中的内容。 只需要把 单独使用可以表示两种状态之间的切换,写在标签中的内容为 checkbox 按钮后的介绍。 在 一个dom标签 ,data中给个布尔值。 点击 布尔值变化 设置 打组, 多选。 和单选类似。 v-model=“checkList” 选中的项,以数组形式自动保存到data中。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V3UmLYeg-1600870725456)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1596977055528.png)] indeterminate 状态 基本用法: 还是用了单个复选框, 和打组复选框。 单选控制 全选。 点击修改data数组。 打组项用v-for=“city in cities” 循环。 使用 在父标签上写属性。 用法同上,直接更换标签。 最简单的用法,放个标签,给个值。 通过 使用 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fWDS7aqC-1600870725457)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1596979526453.png)] 可以通过 prefix-icon 项目使用 下拉框: 使用数据分两两部分。 最终选择值的变量存放。 option展示选项的值。 选项是v-for 循环出来的, v-model 绑定一个data的值。 项目使用: 为 为了启用远程搜索,需要将 测试: el-select 标签中加入:multiple 多选属性 联动下拉框 关键点看下面4个 一个存储选择的值。 [ ] 是一个数组 一个是渲染下拉 下拉数据是分层级的结构 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qsdChK8E-1600870725458)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597243120289.png)] 二级数据如果不是 child键值命名, 则无法使用。 需要自行添加配置项。 props 中配置。 从后端拿到arr数据结构: vue文件代码 js 备注: 下面的写法等于行内的写法。 等同于: 项目中使用: 组织机构连级下拉 所用的工具函数 工具函数: 使用方法: 为 绑定 设置 使用 el-time-select 标签,分别通过 总结:1 放置时间标签 2 准备变量结果值存储 @change =‘changeevent’ 写在时间标签内 和timepicker类似。 如果是时间范围,则data是一个数组。 日期,时间,选择器的标签不一样,转换显示格式的时候,可能需要更换标签。 value-format=“timestamp” 关于后台传递datatime格式的时间字段 后台数据报错,先看报错信息。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LMIQPMYH-1600870725459)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1598505380338.png)] 2020.0827 出现数据库格式无法校验成功。 原因是: 使用: 放置上传标签 总结: 一个upload标签, 所有的属性和方法都放到里面。 包含接口的调试。 上传功能:包含图片。world excel 等文件的上传。 下载功能: 查看文件的头部的项目总结。 项目使用: 由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据 在 Form 组件中,每一个表单域由一个 Form-Item 组件构成,表单域中可以放置各种类型的表单控件,包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker form 一般用于 以数组形式保存form的全部的用户选择的值。 el-form :model=“formInline” [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f8DLCxyc-1600870725459)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597332771898.png)] 通过设置 实现校验成功 需要这两个属性配合使用。 :rules=“rules” ref=“ruleForm” 一个注入规则,一个点击时,校验,合格则返回一个布尔值。 :model=“ruleForm” 灌入数据 :rules=“rules” 灌入验证规则 ref=“ruleForm” 获取指定的dom。 注意点: 如果修改变量名,下面按钮的传值也要跟这变, item项: prop="name1 是 rules中的name1 验证 提交按钮要在form中。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-doVcYMOi-1600870725460)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597337305932.png)] :rules 对应规则。 prop 对应data中的值。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yq4Pwxp1-1600870725461)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597338848585.png)] 注意点: 双引号和单引号的问题 :rules 对应规则。 prop 对应data中的值。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NIZK46IG-1600870725462)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597507647163.png)] 自定义验证与form验证的区别是data规则自定义部分 validator 新属性。 用于自定义配置。 和 trigger触发方式 项目使用: 在data中定义规则,注意不是return之中。 data() { //定义规则 return { } } 配置触发 回调函数,抛出错误方法 return callback(new Error(‘年龄不能为空’)); 可能出现的问题: input输入中文的时候, 输入框可能布局变化,可能高度变化。 解决方案:不用layout布局。 @change=“handleChange” 自定义数据格式 标准数据是: label value disable ; 如果不是标准数据,可以props中指定。 右侧选中, data中有重复的value时,会报错。 value,有重复的值,不会报错。 当 父标签 注入数据 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5noaSoLb-1600870725462)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597335282253.png)] el-table 中直接放入属性: stripe( n. 条纹,斑纹;种类) el-table 中直接放入属性: border 根据数据状态添加背景色 可以通过指定 Table 组件的 tableRowClassName 添加事件, 回调参数是每行的数据和index . 每条数据条用一次。 return class名字。 配合 css 区分颜色。 只要在 el-table 标签中 添加 height=“150” 一个高度。 横向内容过多时,可选择固定列 固定列需要使用 方法是: 在column中 添加 fixed . 想固定那一列就添加在哪一行。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1uRXtTH7-1600870725463)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597515790460.png)] 场景: 表格的点击事件中, 传入本行的数据。 横纵内容过多时,可选择固定列和表头。 固定列和表头可以同时使用,只需要将上述两个属性分别设置好即可。 当数据量动态变化时,可以为 Table 设置一个最大高度。 通过设置 table 标签中 放置 max-height=“250” 控制最大高度。 只需要在 el-table-column 里面嵌套 el-table-column,就可以实现多级表头。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ApDJnOZN-1600870725464)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597517626090.png)] column 标签包裹 able 组件提供了单选的支持,只需要配置 关键点 : el-table 标签中 指定行背景色改变。两种方式:一种是点击表格,所在行变色。 一种是不惦记表格, 函数触发变色。 2 函数式变色: 如果需要显示索引,可以增加一列 选择多行数据时使用 Checkbox。 实现多选非常简单: 手动添加一个 关键点: 手动添加一个 方法 methods : 和上面一样。 注意点: 方法使用需要指定tabel 。 ref属性加上。 ref=“multipleTable” 在列中设置 第一种: 列排序 ,想那列可以排序,就在列上加上属性: sortable 表明可以排序 第二种: 设置默认排序 :default-sort="{prop: ‘date’, order: ‘descending’}" 设置默认的 排序列 和 排序顺序 监听排序变化 列设置为可以排序后,监听事件, 对数组显示做处理 在本例中,我们还使用了 想处理哪一行: :formatter=“formatter” 绑定方法; 方法, 数据渲染是,自动过滤每一行,进行数据处理。 统一判断加后缀等。比如返回不同的按钮等。 像如下方法:使用场景 对表格进行筛选,可快速查找到自己想看的数据。 在列中设置 完整代码: 自定义列的显示内容,可组合其他组件使用。 通过 第一种 拦截数据, 加图标 第二种 ; 拦截 使用组件 hober悬浮显示 姓名: {
{ scope.row.name }} 住址: {
{ scope.row.address }} 第三种: 操作栏 事件获取行数据 当行内容过多并且不想显示横向滚动条时,可以使用 Table 展开行功能。 过设置 type=“expand” 和 总结: 方法是添加一行。 行类型设置 type=“expand”, 里面嵌套一个slot模板,将行数据写入。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LTeZ8pvK-1600870725464)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597548837166.png)] 支持树类型的数据的显示。当 row 中包含 总结: 树形结构的判断首先是数据结构,如下 数据中出现children字段,判断为该行是树形, tabel标签中设置 数据参数,和是否默认打开。 children: 'children_ 设置数据。 通过设置 Scoped slot 来自定义表头。 总结: 上边的搜索框和下边的按钮可以分别设置。 方式就是table 上加上过滤条件。 search 是data中的值。 search: “” 。 空就是false. 每一条数据都经过输入框内容的过滤。然后渲染。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0rVP6l6-1600870725465)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597550469688.png)] 上边的搜索框和下面的按钮,是透过添加一行。 slot-scope=“scope” 自定义出来的。 完整代码: 总结: 两种方法,一个自动,一个自定义。 第一个:将 第二种: 你也可以定义自己的合计逻辑。使用 table 标签中 :summary-method=“getSummaries” 格式化函数。 函数中返回一个处理后的数组。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3DZOMVoz-1600870725466)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597552635618.png)] 计算方法参照官方案例。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a0mnIMD7-1600870725466)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597552238445.png)] 使用情景 : 多行或多列共用一个数据时,可以合并行或列 通过给 总结: tabel中绑定一个方法: 方法中回调。 方法: 通过给 总结: tabel中绑定一个属性。:index=“indexMethod” 方法中 定义一个自定义的逻辑。 methods: { [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DMWLAJ0j-1600870725467)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1598542342597.png)] 总结: element ui 有tips的组件。这个和其功能差不多。 使用 分页标签 分页标签属性控制显示按钮,几个事件,上一页 点击时,下一页点击时。 可以用于调用接口,更换数据。达到渲染的目的。 基础用法 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mUGrLFIA-1600870725467)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597554956875.png)] :value=“n” 写多少就是几条消息 可自定义最大值 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fkrigjv8-1600870725468)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597555078153.png)] value=“new” 冒号去掉就是绑定文字。 用图标、图片或者字符的形式展示用户或事物信息。 形象标签 通过 支持三种类型:图标、图片和字符 标签找中放 图片,文字和表情。 页面中的非浮层元素,不会自动消失。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qRhx9ccr-1600870725468)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597074945072.png)] 放到页面中就显示。 页面加载,就会显示。点击可以关闭。 适用场景: 页面加载的提醒。 分为三种: table 指令 和服务 Element 提供了两种调用 Loading 的方法:指令和服务。对于自定义指令 场景1 : el-table 中的。 充当一个配置项 loading绑定一个data 布尔值。路网项目中使用。 看下面, 直接卸载table中, 布尔值控制。 总结: 在按钮中v-loading.fullscreen.lock=“是或者是否” 加入属性。并用一个方法控制 布尔值的 是与否 当使用指令方式时,全屏遮罩需要添加 dom部分 触发方式: 需要一个点击事件。例如按钮来触发 比较简单一点: 是需要一个事件。 每次使用,声明一个loadding . loading.close();方法是关闭。 项目使用: 总结: 访问错误,直接调用方法。 this.$message(‘参数错误,请重新输入’); 参数type控制显示警告还是成功的样式。 弹窗可以手动关闭。 常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。 Element 注册了一个 就一个方法, 可以直接mounted中调用。 使用方便。 使用场景: 在提交成功时的提醒。 3s后自动消失。也可以主动关闭。 使用: 也是直接调用方法,传入参数。 定位:弹出简单的内容 这里表明: 有三个方法。 alert 只有确定 confirm 确定和取消 prompt prompt() 方法用于显示可提示用户进行输入的对话框。 弹出一个输入框。 从场景上说,MessageBox 的作用是美化系统自带的 模拟系统的消息提示框而实现的一套模态对话框组件,用于消息提示、确认消息和提交内容。 从场景上说,MessageBox 的作用是美化系统自带的 调用 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SR0K9n2d-1600870725469)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597079854335.png)] 弹出位置是屏幕中间。 使用方法是this.$alert() 直接调用方法。 和message使用 方法是一样的。 提示用户确认其已经触发的动作,并询问是否进行此操作时会用到此对话框。 总结: 也是一个方法,类似propose then和catch,分两种情况。 右侧闯入提醒。 悬浮出现在页面角落,显示全局的通知提醒消息。 dropdown 标签 command 回调事件 注意点: dialog配置项的写法: 注意加 : center。 否则报错 在保留当前页面状态的情况下,告知用户并承载相关操作。 Dialog 弹出一个对话框,适合需要定制性更大的场景。 需要设置 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C8LGmRNC-1600870725470)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597081198974.png)] 弹框层,由一个布尔值控制。 body foot两部分。 body可以构建自己的dom。 可以是form 表单, 可以是表格。 foot两个按钮。 弹窗框的标题,变量替换 :title="加变量 " 如果需要在一个 Dialog 内部嵌套另一个 Dialog,需要使用 正常情况下,我们不建议使用嵌套的 Dialog,如果需要在页面上同时显示多个 Dialog,可以将它们平级放置。对于确实需要嵌套 Dialog 的场景,我们提供了 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q46VquNX-1600870725470)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597591986023.png)] 总结: 二级弹窗,就是在原本放一级内容的 区域,有放入要给dialog标签,配置 append-to-body属性。 两个布尔值控制。一个内,一个外。 二级弹窗配置项,和一级一样使用。 作用: 悬浮就显示 使用方法: tooltip 标签包裹即可。content动态绑定提示内容。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b8ZRZXvx-1600870725471)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597081822059.png)] 在这里我们提供 9 种不同方向的展示方式,可以通过以下完整示例来理解,选择你要的效果。 总结: content控制显示内容。placement控制显示方向。 Popover 的属性与 Tooltip 很类似,它们都是基于 总结: 弹窗框,嵌套table。 table渲染的数据灌入使用。 property指定数据键值对。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3EXxlpbK-1600870725472)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597082580341.png)] Events 基础用法 使用el-timeline时间线标签 和组标签 el-timeline-item 。 属性:可以自定义图标,颜色,时间戳,标题。 上线显示位置。 时间线 排序属性。 router : 是否使用 vue-router 的模式,启用该模式会 项目使用: router 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转 插件配置 ,关注两点: 01. router 属性 02 item 中 的index="/helloWorld/layout" ,写路由。 易错点: 点击bar时, 路由叠加,导致无法显示。原因是 /helloWorld/layou / 横杠别忘了加。 路由的配置: 基础知识: 父级组件中写入bar,切换的头部。 container 内容写在子级组件中。 当路由中同时/helloWorld/layout, 同时切换时, 页面会同时显示父 ,子级内容。 子级内容会显示在 的位置,并替换掉view标签。 这里:可以使用element插件的上下布局。 --------方法-------------- methods: { 处理中心 子项有几种表现形式: { 3 Container 布局容器
4 Color 色彩
5 字体
6 Icon 图标
el-icon-iconName
来使用即可。例如:
7 Button 按钮
参数
说明
类型
可选值
默认值
size
尺寸
string
medium / small / mini
—
type
类型
string
primary / success / warning / danger / info / text
—
plain
是否朴素按钮
boolean
—
false
round
是否圆角按钮
boolean
—
false
circle
是否圆形按钮
boolean
—
false
loading
是否加载中状态
boolean
—
false
disabled
是否禁用状态
boolean
—
false
icon
图标类名
string
—
—
autofocus
是否默认聚焦
boolean
—
false
native-type
原生 type 属性
string
button / submit / reset
button
.el-button 控制高宽
el-button–primary控制颜色8 Link 文字链接
Attributes
参数
说明
类型
可选值
默认值
type
类型
string
primary / success / warning / danger / info
default
underline
是否下划线
boolean
—
true
disabled
是否禁用状态
boolean
—
false
href
原生 href 属性
string
—
-
icon
图标类名
string
—
-
第二部分: form表单
1 Radio 单选框
v-model
绑定变量,选中意味着变量的值为相应 Radio label
属性的值,label
可以是String
、Number
或Boolean
。
禁用状态
2 单选框多个组使用
<el-radio-group v-model="radio">
<el-radio label="1">备选项</el-radio>
<el-radio label="6">备选项</el-radio>
<el-radio label="9">备选项</el-radio>
</el-radio-group>
<script>
export default {
data () {
return {
radio: 1
};
}
}
</script>
el-radio-group
中绑定v-model
, 在el-radio
中设置好label
即可,无需再给每一个el-radio
绑定变量,另外,还提供了change
事件来响应变化,它会传入一个参数value
。表单验证
rules
属性传入约定的验证规则,并 Form-Item 的 prop
属性设置为需校验的字段名即可。关于表单验证:总结:
忽略验证的情况:
关于循环input 的动态验证方法
按钮样式
el-radio
元素换成el-radio-button
元素即可,此外,Element 还提供了size
属性。
单选的回调函数
Radio Events
事件名称
说明
回调参数
change
绑定值变化时触发的事件
选中的 Radio label 值
3 Checkbox 多选框
基础用法
el-checkbox
元素中定义v-model
绑定变量,单一的checkbox
中,默认绑定变量的值会是Boolean
,选中为true
。
禁用状态
disabled
属性即可。多选框组
复选框的一键全选
indeterminate
属性用以表示 checkbox 的不确定状态,一般用于实现全选的效果
可选项目数量的限制
min
和 max
属性能够限制可以被勾选的项目的数量。按钮样式
按钮事件
事件名称
说明
回调参数
change
当绑定值变化时触发的事件
更新后的值
3 Input 输入框
基础用法
禁用状态
disabled
属性指定是否禁用 input 组件可清空
clearable
属性即可得到一个可清空的输入框带 icon图标 的输入框
prefix-icon
和 suffix-icon
属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。和
suffix-icon` 控制图标前放还是后放。 图标class 参考 组件图标。可自适应文本高度的文本域 textarea
复合型输入框
带输入建议
密码形式:input
修改type="password" 即可
4 Select 选择器
1. 基础用法
总结: v-model
的值为当前被选中的el-option
的 value 属性值
禁用状态
el-select
设置disabled
属性,则整个选择器不可用
2. 远程搜索
下拉框和翻页混合使用
filterable
和remote
设置为true
,同时传入一个remote-method
。remote-method
为一个Function
,它会在输入值发生变化时调用,参数为当前输入值。需要注意的是,如果el-option
是通过v-for
指令渲染出来的,此时需要为el-option
添加key
属性,且其值需具有唯一性,比如此例中的item.value
。3 下拉多选功能:
5 Cascader 级联选择器 级联下拉 练级下拉
1 下方是标准数据: 具体看官网
<el-cascader
v-model="value" // 选择的值
:options="options" // 联查数据
:props="{ expandTrigger: 'hover' }" // 点击和hover两种
@change="handleChange" // 选择事件
></el-cascader>
export default {
data() {
return {
value: ['一级'],
options: [
{
value: "zhinan",
label: "指南",
children: [
{
value: "cexiangdaohang",
label: "侧向导航",
},
{
value: "dingbudaohang",
label: "顶部导航",
},
],
},
],
},
{
value: "zujian",
label: "组件",
children: [
{
value: "basic",
label: "Basic",
children: [
{
value: "layout",
label: "Layout 布局",
},
{
value: "color",
{
value: "radio",
label: "Radio 单选框",
},
{
value: "checkbox",
label: "Checkbox 多选框",
};
},
methods: {
handleChange(value) {
console.log(value);
},
},
};
2 非标准数据的调整
使用props设置value、label、children
cityList: [
{
id: 1,
name: '北京',
child: [
id: 11,
name: '大兴区',
child: [
id: 111,
name: '亦庄'
]
]
}
]
data: {
optionProps: {
value: 'id',
label: 'name',
children: 'child'
}
}
{
distsCode: "330000"
distsName: "浙江省"
fdObjectid: "1"
id: "33000001"
name: "省公路与运输管理中心"
orgOrder: null
orgType: "province"
orgTypeName: "省级机构"
pId: "0"
remark: "" }
/**
* @description 处理级联数据
* @param {array} data 被处理数据
* @return {array} 处理后数据
*/
setUnitList(data) {
var _id = "id"; 自己的id
var _pid = "pId"; papent id 指明
var _children = "children"; (二级数据以什么键名字)
var map = {};
data.forEach(function (item) {
if (!item[_pid]) {
item[_pid] = "~";
}
var _idval = item[_id].toString();
map[_idval] = item;
});
var val = [];
data.forEach(function (item) {
var _pidval = item[_pid].toString();
var parent = map[_pidval];
if (parent) {
(parent[_children] || (parent[_children] = [])).push(item);
} else {
val.push(item);
}
});
return val;
},
基础多选
el-select
设置multiple
属性即可启用多选,此时v-model
的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现,你也可以设置collapse-tags
属性将它们合并为一段文字。6 Switch 开关
基本用法
v-model
到一个Boolean
类型的变量。可以使用active-color
属性与inactive-color
属性来设置开关的背景色。active-value
和inactive-value
属性,接受Boolean
, String
或Number
类型的值。7 TimePicker 日期选择器
star
、end
和step
指定可选的起始时间、结束时间和步长
Events
事件名
说明
参数
change
用户确认选定的值时触发
组件绑定值
8 DatePicker 日期选择器
选择日
其他日期单位
选择日期范围
日期格式
项目使用时间格式
**时间选择器遇到的问题:
9 Upload 上传
10 Form 表单 综合
form使用规则
v-model="formInline.user"
数据绑定
对齐方式
label-position
属性可以改变表单域标签的位置,可选值为 top
、left
,当设为 top
时标签会置于表单域的顶部表单验证
v-model=“ruleForm.name”
resetForm(formName) { 这里接受的时形参。 对应错误将找不到方法。
this.$refs[formName].resetFields();
}
rule规则
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
],
desc: [
{ required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
{ type: 'number', message: 'paramValue必须为数字值'}
rule的 item写法
自定义表单验证
data() {
var checkAge = (rule, value, callback) => {
if (!value) {
return callback(new Error("年龄不能为空"));
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error("请输入数字值"));
} else {
if (value < 18) {
callback(new Error("必须年满18岁"));
} else {
callback(); < --- 必须reture
}
}
}, 1000);
};
return {
ruleForm: {
age: "",
},
rules: {
age: [{ validator: checkAge, trigger: "blur" }],
},
};
},
第一:
第二:
rolerule: {
name: [ { required: true, message: '角色名称不可重复', trigger: 'blur' },
配置属性validator--------> {validator: checkname, trigger: 'blur' }, ],
code: [{ required: true, message: '必填项', trigger: 'blur' }],
},
第三
var checkname = (rule, value, callback) => {
console.log(value)
if (!value) {
return callback(new Error('年龄不能为空'));
}
setTimeout(() => {
}, 1000);
};
关于自定义验证的必须条件 callback(); < — 必须reture
form表单的和layout的配合使用
11 穿梭框
1.基础使用
两侧默认选中。
handleChange(value, direction, movedKeys) {
// console.log(value, direction, movedKeys);
console.log( direction);
console.log( value);
console.log( movedKeys);
}, 回调接受三个值。 一个是移动方向 一个是移动的但前值。一个是移动组的所剩余的值组。
自定义渲染函数
案例 03 renderFunc(h, option) { // 穿梭框自定义结构
return (
{option.key} - {option.label}
);
},
:props="{key: 'fdObjectid',label: 'deviceName',disabled: true}"
// 视频区数据
shuttledata: [
{ key: 1, label: "备选项 1", disabled: false },
{ key: 2, label: "备选项 2", disabled: false },
],
shuttleInput: [], // 穿梭框已选中变量
关于穿梭框key重复的问题
data: [
{value:1,desc:'选项1',disabled:false},
// {value:1,desc:'选项11',disabled:false},
{value:2,desc:'选项2',disabled:false},
{value:3,desc:'选项3',disabled:false},
],
value: [1,1]
第三部分: Data
1 Table 表格
在table中 prop 是data值
el-table
元素中注入data
对象数组后,在el-table-column
中用prop
属性来对应对象中的键名即可填入数据,用label
属性来定义表格的列名。可以使用width
属性来定义列宽。
label=“姓名” // 表格名字
width=“180”>
2 斑马纹的表格
3 带边框表格
4 带状态表格 高亮行背景色
row-class-name
属性来为 Table 中的某一行添加 class,表明该行处于某种状态。
5 固定表头
el-table
元素中定义了height
属性,即可实现固定表头的表格,而不需要额外的代码。6 固定列
fixed
属性,它接受 Boolean 值或者left``right
,表示左边固定还是右边固定。
7 传值 操作栏按钮
slot-scope=“scope”
8 固定列和表头
9 流体高度
max-height
属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度,则会显示一个滚动条。10多级表头
11 单选 点击变色 行
highlight-current-row
属性即可实现单选。之后由current-change
事件来管理选中时触发的事件,它会传入currentRow
( 点击行的数据),oldCurrentRow
。如果需要显示索引,可以增加一列el-table-column
,设置type
属性为index
即可显示从 1 开始的索引号。
handleCurrentChange(val) {
console.log(val);
this.currentRow_ = val;
},
ref="singleTable"
table标签加上ref 属性。获取dom指定表格
表格 首列 index显示
el-table-column
,设置type
属性为index
即可显示从 1 开始的索引号。
12 多选 获取多行的数据
el-table-column
,设type
属性为selection
即可;默认情况下若内容过多会折行显示,若需要单行显示可以使用show-overflow-tooltip
属性,它接受一个Boolean
,为true
时多余的内容会在 hover 时以 tooltip 的形式显示出来el-table-column
,设type
属性为selection
即可。 可以进行多选。 如果想获取选中的几行数据。使用方法
handleSelectionChange(val) {
console.log(val);
this.multipleSelection = val;
},
data中准备
multipleSelection: [],
函数式 选中几行事件
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
13 排序
sortable
属性即可实现以该列为基准的排序,接受一个Boolean
,默认为false
。可以通过 Table 的default-sort
属性设置默认的排序列和排序顺序。可以使用sort-method
或者sort-by
使用自定义的排序规则。如果需要后端排序,需将sortable
设置为custom
,同时在 Table 上监听sort-change
事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据。在本例中,我们还使用了formatter
属性,它用于格式化指定列的值,接受一个Function
,会传入两个参数:row
和column
,可以根据自己的需求进行处理。
对列数据进行加后缀
formatter
属性,它用于格式化指定列的值,接受一个Function
,会传入两个参数:row
和column
,可以根据自己的需求进行处理。
methods: {
formatter(row, column) {
// console.log(row); 行信息
// console.log(column); 列信息
return row.name+ ' 后缀';
},
},
formatter(row, column) {
console.log(row);
if(row.name=="张三"){
return "危险分子"
}else{
return row.address+ ' 后缀';
}
},
14 筛选 过滤器
filters``filter-method
属性即可开启该列的筛选,filters 是一个数组,filter-method
是一个方法,它用于决定某些数据是否显示,会传入三个参数:value
, row
和 column
。
15 自定义列模板 显示组件搭配
Scoped slot
可以获取到 row, column, $index 和 store(table 内部的状态管理)的数据,用法参考 demo。
16 展开行
Scoped slot
可以开启展开行功能,el-table-column
的模板会被渲染成为展开行的内容,展开行可访问的属性与使用自定义列模板时的 Scoped slot
相同
17 树形数据与懒加载
children
字段时,被视为树形数据。渲染树形数据时,必须要指定 row-key
。支持子节点数据异步加载。设置 Table 的 lazy
属性为 true 与加载函数 load
。通过指定 row 中的 hasChildren
字段来指定哪些行是包含子节点。children
与 hasChildren
都可以通过 tree-props
配置。{
id: 3,
date: '2016-05-01',
name: '王二吗',
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 31,
date: '2016-05-01',
name: '王二',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王二',
address: '上海市普陀区金沙江路 1519 弄'
}]
}
default-expand-all
:tree-props="{children: 'children_', hasChildren: 'hasChildren'}">
18 自定义表头
19 表尾合计行
show-summary
设置为true
就会在表格尾部展示合计行默认情况下,对于合计行,第一列不进行数据求合操作,而是显示「合计」二字(可通过sum-text
配置),其余列会将本列所有数值进行求合操作,并显示出来。summary-method
并传入一个方法,返回一个数组,这个数组中的各项就会显示在合计行的各列中,具体可以参考本例中的第二个表格。20 合并行或列
table
传入span-method
方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row
、当前列column
、当前行号rowIndex
、当前列号columnIndex
四个属性。该函数可以返回一个包含两个元素的数组,第一个元素代表rowspan
,第二个元素代表colspan
。 也可以返回一个键名为rowspan
和colspan
的对象。:span-method="arraySpanMethod"
methods: {
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
if (rowIndex % 2 === 0) {
if (columnIndex === 0) {
return [1, 2]; // 意思就是 第一行,跨两列。进行合并。
} else if (columnIndex === 1) {
return [0, 0];
}
}
},
21 自定义索引
type=index
的列传入 index
属性,可以自定义索引。该属性传入数字时,将作为索引的起始值。也可以传入一个方法,它提供当前行的行号(从 0
开始)作为参数,返回值将作为索引展示。
indexMethod(index) {
return index * 2;
}22 tips 行内容多时,tips显示
23 tabel中的加载过渡效果
data:{
tableMaxHeight: "496", // 表格流体高度
loading: false, //表格加载动画
}
数据请求中,
this.loading = true; 进入时 确定打开过渡
this.loading = false; 数据返回时 关闭过渡
if (code === 200) {
this.loading = false;
this.tableData = res.data.resultData.dataList;
this.total = res.data.resultData.total;
}
2 Pagination 分页
3 Badge 标记 消息条数显示
4 Avatar 头像
shape
和 size
设置头像的形状和大小。展示类型
第四部分:Notice提醒
1 Alert 警告
Alert 组件提供四种主题,由type属性指定,默认值为info。
2 Loading 加载
局部加载效果
v-loading
,只需要绑定Boolean
即可。整页加载
指令方式
fullscreen
修饰符(遮罩会插入至 body 上),此时若需要锁定屏幕的滚动,可以使用lock
修饰符;当使用服务方式时,遮罩默认即为全屏,无需额外设置。服务方式
openFullScreen2() {
const loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(() => {
loading.close();
}, 2000);
}
// 导出 exportExcel 模板
downExcelTemplate() {
const loading = this.$loading({
lock: true,
text: "导出中",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
this.$axios({
url: this.$path + "/api-auth/uasUser/exportUasUserTemplate",
method: "get",
timeout: 180000,
responseType: "blob",
})
.then((res) => {
// 定义文件名等相关信息
loading.close();
const blob = res.data;
if ("download" in document.createElement("a")) {
const reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = (e) => {
const a = document.createElement("a");
var date = moment().format("YYYY-MM-DD hh:mm:ss");
a.download = `用户信息模板${date}.xlsx`;
document.body.appendChild(a);
a.href = URL.createObjectURL(blob);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
};
} else {
navigator.msSaveBlob(blob, `用户信息模板${date}.xlsx`);
}
})
.catch(() => {
loading.close();
});
},
3 Message 消息提示this.$message
this.$message({
message: '恭喜你,这是一条成功消息',
type: 'success'
});
this.$message({
message: '警告哦,这是一条警告消息',
type: 'warning'
});
可关闭
$message
方法用于调用,Message 可以接收一个字符串或一个 VNode 作为参数,它会被显示为正文内容。methods: {
open() {
this.$message('这是一条消息提示');
},
mounted(){
this.openVn()
}
4 MessageBox 弹框 this.$alert
alert
、confirm
和 prompt
alert
、confirm
和 prompt
,因此适合展示较为简单的内容。如果需要弹出较为复杂的内容,请使用 Dialog。消息提示
$alert
方法即可打开消息提示,它模拟了系统的 alert
,无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数,message
和title
。 this.$alert('这是一段内容', '标题名称', {
confirmButtonText: '确定',
callback: action => {
console.log(action);// 在这里判断点击了是还是否
this.$message({
type: 'info',
message: `action: ${ action }`
});
}
});
点击确认消息
5 Notification 通知
第五部分
Dropdown 下拉菜单
其他弹窗
Attributes
参数 说明 类型 可选值 默认值
visible 是否显示 Dialog,支持 .sync 修饰符 boolean — false
1 Dialog 对话框
基本用法
visible
属性,它接收Boolean
,当为true
时显示 Dialog。Dialog 分为两个部分:body
和footer
,footer
需要具名为footer
的slot
。title
属性用于定义标题,它是可选的,默认值为空。最后,本例还展示了before-close
的用法。<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
custom-class
title="提示" 左上角弹窗名字
:visible.sync="dialogVisible" 显示控制
width="30%" 弹窗宽度
:before-close="handleClose" 关闭前的回调
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose(done) {
this.$confirm('确认关闭?')
.then(_ => {
done();
})
.catch(_ => {
});
}
}
};
</script>
项目使用:
Events
事件名称
说明
回调参数
open
Dialog 打开的回调
—
opened
Dialog 打开动画结束时的回调
—
close
Dialog 关闭的回调
—
closed
Dialog 关闭动画结束时的回调
Dialog 两层对话框
append-to-body
属性。append-to-body
属性。将内层 Dialog 的该属性设置为 true,它就会插入至 body 元素上,从而保证内外层 Dialog 和遮罩层级关系的正确。
我是二级内容
我是一级内容
我是二级内容
2 Tooltip文字提示
基础用法
3 Popover 弹出框
基础用法
Vue-popper
开发的,因此对于重复属性,请参考 Tooltip 的文档,在此文档中不做详尽解释。 <el-popover
placement="right"
width="600"
trigger="click">
<el-table :data="gridData">
<el-table-column width="150" property="date" label="日期"></el-table-column>
<el-table-column width="100" property="name" label="姓名"></el-table-column>
<el-table-column width="300" property="address" label="地址"></el-table-column>
</el-table>
<el-button slot="reference">click 激活</el-button>
</el-popover>
4 Popconfirm 气泡确认框
事件名称
说明
回调参数
onConfirm
点击确认按钮时触发
—
onCancel
点击取消按钮时触发
—
Divider 分割线
第六部分 Others
1 ¶Timeline 时间线
Navigation 导航菜单
基础用法:
父标签:el-menu 标签包裹
:default-active="activeIndex"// 默认显示的bar
class="el-menu-demo" // 自定义class
mode="horizontal" // 排列方式
@select="handleSelect"// 点击的回调
子项: el-menu-item
项目使用:
index 使用router形式
{
path: '/helloWorld',
name: 'HelloWorld',
component: Button,
children:[
{ path: 'layout', component: Layout },
{ path: 'border', component: Border },
]
}
handleSelect(key, keyPath) {
console.log(key, keyPath);
},
},
#### 父标签:el-menu 标签包裹
:default-active="activeIndex"// 默认显示的bar
class="el-menu-demo" // 自定义class
mode="horizontal" // 排列方式
@select="handleSelect"// 点击的回调
#### 子项: el-menu-item
子项:index=“1” 是选中时的value值。 中间的是显示的内容。 相当于label
订单管理
02 禁用
消息中心
03 多级
我的工作台
选项1
选项2
选项3
### 项目使用:
router : 是否使用 vue-router 的模式,启用该模式会
预警响应管理
突发事件管理
处置管理
应急处置管理
突发事件处置
活动指令事件处置
物资调拨
#### index 使用router形式
项目使用:
router 是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转
插件配置 ,关注两点: 01. router 属性 02 item 中 的index="/helloWorld/layout" ,写路由。 易错点:
点击bar时, 路由叠加,导致无法显示。原因是 /helloWorld/layou / 横杠别忘了加。
路由的配置:
path: ‘/helloWorld’,
name: ‘HelloWorld’,
component: Button,
children:[
{ path: ‘layout’, component: Layout }, { path: 'border', component: Border },
]
}
基础知识: 父级组件中写入bar,切换的头部。 container 内容写在子级组件中。 当路由中同时/helloWorld/layout, 同时切换时, 页面会同时显示父 ,子级内容。 子级内容会显示在