1、v-loading加载动画。
v-loading=true,element-ui的组件会有加载动画。
v-loading=false,element-ui组件的加载动画会隐藏。
2、v-if模板条件判断。
3、this.$message消息提示框。
4、v-model数据双向绑定。
5、prop验证规则和表单子父级对象对应。
6、es6动态属性扩展。
例如:
let obj={
name:“张三”,
age:23
}
//扩展属性
obj.sex=“男”
7、vue生命周期。
8、qrcode二维码生成。
9、自定义页面组件。通过模板自定义页面,然后引入到其他页面,这里就涉及到一个子父级组件数据交互使用$emt
10、router路由配置。
11、富文本编辑器图片上传转成base64编码数据包太大,访问接口崩溃问题。
重写富文本编辑器的图片上传功能,改为变成保存url连接。
12、elements-ui默认栅格化布局。
13、elements-ui之icon图标样式。
14、let、var、const声明变量问题。
15、固定写法之:
export default{
data(){
return {
属性
}
}
}
16、elements-ui之rules表单校验,可以自定义方法校验。
17、自定义校验规则,如果通过了自定义的校验规则,也需要调用callback()方法。
18、import导入的方法和methods中方法的区别:
import导入的方法不需要加什么前缀修饰,但是如果是methods中的方方法,data中的属性则必须使用this关键字修饰访问,否则报错。
19、浏览器调试之端点调试。
20、附件上传一般是将附件上传到一个云服务器,上传成功之后返回一个文件地址,可供公网访问。
21、table表格选中高亮样式highlight-current-row。
22、在页面上使用router-view标签用来介绍路由跳转传递过来的component组件。
22、el-tab-pane标签必须紧跟el-tabs,作为el-tabs的直接子元素,否则没有效果。
23、:lable=“可以直接data中定义的属性”
例如:
<div :style="{height:test}"></div>
24、下面el-tab-pane的name和el-tabs的v-model的模型的值一致才会显示,也就可以做到tab选项卡切换的效果了。
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>
25、表单复制过来的lable和input不对齐;
解决方式:form标签加上label-width
<el-form ref="form" :model="form" label-width="80px">
26、单选框组的默认选中且互斥
el-radio-group里面的el-radio的:label的值和el-radio-group的v-model的属性一致的话,就默认选中。不停的修改el-radio-group的v-model对象的值,就实现了互斥选中。
27、elementsui点击table上的编辑按钮的click事件会触发row-click,添加编辑事件的时候使用@click.stop=“edit”,就可以屏蔽掉row-click事件了。
28、可编辑双向绑定的表格
<el-tabs v-model="activeName">
<el-tab-pane label="字典明细" name="first">
<el-table :data="currenObj.detail" style="width: 100%">
<el-table-column prop="address" label="字典名称">
<template scope="scope">
<el-input
size="small"
v-model="scope.row.name"
placeholder="请输入内容"
@change="handleEdit(scope.$index, scope.row)"
></el-input>
</template>
</el-table-column>
<el-table-column prop="address" label="状态">
<template scope="scope">
<el-radio-group v-model="scope.row.status">
<el-radio :label="1">启用</el-radio>
<el-radio :label="2">禁用</el-radio>
</el-radio-group>
</template>
</el-table-column>
<el-table-column prop="address" label="备注">
<template scope="scope">
<el-input
size="small"
v-model="scope.row.memo"
placeholder="请输入内容"
@change="handleEdit(scope.$index, scope.row)"
></el-input>
</template>
</el-table-column>
<el-table-column label="操作">
<template scope="scope">
<el-button
size="small"
type="danger"
@click="handleDelete(scope.$index, scope.row)"
>删除</el-button>
</template>
</el-table-column>
29、form表单校验,如果prop的名称和表单输入项的v-model不一致就会出现,输入了内容但是表单校验的提示没有消失。
30、给表格设置默认选中项,表格的:row-class-name属性可以指定一个方法,然后在这个方法中使用一些数据进行判断,可以实现动态添加样式,但是需要注意的是需要把highlight-current-ro这个属性出去。