elements-ui和vue常见的一些使用方式

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这个属性出去。