elemnet ui vue pc端 笔记整理

elemnet ui vue pc端

调用父组件方法

console.log(this.$parent.tabelRenderEvent)

2020.05.15 总结：

form表单组

  
    
  
  
  
    
      
      
    
  
  
  
    查询
  
  

:label-position=“labelPosition”

:inline=“true” 设置 inline 属性可以让表单域变为行内的表单域

关于form表单验证。

关键点： 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)]

关于element input 回显

只要，对应好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: "成功!",
                      });

图片的下载功能

（在用项目 可使用）文件下载：event ->log 文件

    //文件下载
    // 入参 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("查询失败");
          }

1 介绍

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。

特性：

一致性 Consistency

反馈 Feedback

效率 Efficiency

可控 Controllability

2 安装 与引入

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)
})

初始化，引入，所有组件即可以使用。

form与layou布局混合使用

layou标签至于form标签内，不影响验证功能。

   
   
      
      
        
        
          
            
{
    { this.tabellistdata.roadInfo}}
          
        
        
          
            
{
    { this.tabellistdata.roadSectionCode}}
          
          
        
        
      
      
       

第一部分：基本部件

1 按钮

    默认按钮
    主要按钮
    成功按钮
    信息按钮
    警告按钮
    危险按钮

注意点： el-button 控制基本样式 type=“danger” 控制样式 就是颜色

2 Layout 布局 格栅

使用注意事项： layout布局只控制屏幕占比。 边距和边框。 在内部加盒子控制。

格栅布局主要就是行和列的布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cp3KYVvp-1600870725455)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1596969010688.png)]

参数：

row 行

:gutter=“10” 栅格间隔 作用是 父盒子两侧 加margin -5 子盒子 两侧加pdding -5 px

行标签上还可以设置 flex ，当父盒子 高度比较大时， 控制子盒子上对其，或者是下对齐。

col 列

1

注意： 这只是控制宽度。 高度有子盒子的高撑起来。

2 表示 margin-left: 25%; 盒子向右侧推出指定距离。

3. 栅格向右移动格数 推

4 栅格向左移动格数 拉

3 Container 布局容器

快速搭建标准的后台管理系统的 三分布局

4 Color 色彩

四种标准颜色 只是16进制的色值

5 字体

6 Icon 图标

直接通过设置类名为 el-icon-iconName 来使用即可。例如：

搜索

通过i 标签， 或者是 el- 的标签内设置 icon=“el-icon-d-arrow-right”。 class名按需查找。

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

解析会加上class名
.el-button 控制高宽
el-button–primary控制颜色

8 Link 文字链接

无下划线
  有下划线

就是a 标签

属性有

Attributes

参数	说明	类型	可选值	默认值
type	类型	string	primary / success / warning / danger / info	default
underline	是否下划线	boolean	—	true
disabled	是否禁用状态	boolean	—	false
href	原生 href 属性	string	—	-
icon	图标类名	string	—	-

第二部分： form表单

1 Radio 单选框

基础用法

由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。

要使用 Radio 组件，只需要设置v-model绑定变量，选中意味着变量的值为相应 Radio label属性的值，label可以是String、Number或Boolean。

总结： 使用el 标签， 绑定变量。 data 配置项中给个绑定值。 label控制 值是什么。

禁用状态

单选框不可点击的状态。 但可以赋予初始值，选中。

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。

  左对齐
  右对齐
  顶部对齐



 data() {
    return {
       labelPosition: 'right',
   
    };
  },

表单验证

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并 Form-Item 的 prop 属性设置为需校验的字段名即可。

关于表单验证：总结：

       4  prop
      5v-model="ruleForm.name
  
6. 如果是不能为空， 看一下是否有默认值。 有值默认符合条件。

忽略验证的情况：

01 表单验证中，item如果v-if =false 。 节点从页面去掉。验证通过。

02

关于循环input 的动态验证方法

案例：下面是循环的其中一项item .

关键点是 prop=“res_form.rateTemplateList[index].templateId” 动态指定值。

:rules=‘res_formRules.templateId’ 动态绑定规则中的内容。

  
                  // 和这一块没有关系
                
                  
                
              

按钮样式

只需要把el-radio元素换成el-radio-button元素即可，此外，Element 还提供了size属性。

单选的回调函数

Radio Events

事件名称	说明	回调参数
change	绑定值变化时触发的事件	选中的 Radio label 值

3 Checkbox 多选框

基础用法

单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。

在el-checkbox元素中定义v-model绑定变量，单一的checkbox中，默认绑定变量的值会是Boolean，选中为true。

备选项

checked: true   

一个dom标签 ，data中给个布尔值。 点击 布尔值变化

禁用状态

设置disabled属性即可。

多选框组

打组， 多选。 和单选类似。 v-model=“checkList” 选中的项，以数组形式自动保存到data中。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V3UmLYeg-1600870725456)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1596977055528.png)]

复选框的一键全选

indeterminate 状态

indeterminate 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果

基本用法： 还是用了单个复选框， 和打组复选框。

单选控制 全选。 点击修改data数组。 打组项用v-for=“city in cities” 循环。

可选项目数量的限制

使用 min 和 max 属性能够限制可以被勾选的项目的数量。

在父标签上写属性。

按钮样式

用法同上，直接更换标签。

按钮事件

事件名称	说明	回调参数
change	当绑定值变化时触发的事件	更新后的值

3 Input 输入框

基础用法

 input: ''

最简单的用法，放个标签，给个值。

禁用状态

通过 disabled 属性指定是否禁用 input 组件

可清空

使用clearable属性即可得到一个可清空的输入框

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fWDS7aqC-1600870725457)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1596979526453.png)]

带 icon图标 的输入框

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

prefix-icon和suffix-icon` 控制图标前放还是后放。 图标class 参考 组件图标。

可自适应文本高度的文本域 textarea

复合型输入框

带输入建议

项目使用

    
    
    
    
    
    两个方法：
      querySearch(queryString, cb) { // 获取焦点时，当前input可选数组对象
      // 调用 callback 返回建议列表的数据
      cb( [
        { value: "最近1公里内", num: "3000" },
        { value: "最近2公里内", num: "2000" },
        { value: "最近3公里内", num: "1000" },
      ]);
    },

  
    handleSelect_search(item) { //  点击下拉的值
      console.log(item);
    },

密码形式：input

   修改type="password"  即可
 
 
    
  

4 Select 选择器

1. 基础用法

总结： v-model的值为当前被选中的el-option的 value 属性值

下拉框： 使用数据分两两部分。 最终选择值的变量存放。

option展示选项的值。

    // value是一个选择的字符。 1 0  或者是true等
    
  

选项是v-for 循环出来的， v-model 绑定一个data的值。

项目使用：

禁用状态

为el-select设置disabled属性，则整个选择器不可用

2. 远程搜索

下拉框和翻页混合使用

为了启用远程搜索，需要将filterable和remote设置为true，同时传入一个remote-method。remote-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果el-option是通过v-for指令渲染出来的，此时需要为el-option添加key属性，且其值需具有唯一性，比如此例中的item.value。

测试：

3 下拉多选功能：

el-select 标签中加入：multiple 多选属性

5 Cascader 级联选择器 级联下拉 练级下拉

​ 联动下拉框

关键点看下面4个

一个存储选择的值。 [ ] 是一个数组

一个是渲染下拉 下拉数据是分层级的结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qsdChK8E-1600870725458)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597243120289.png)]

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 非标准数据的调整

二级数据如果不是 child键值命名， 则无法使用。

需要自行添加配置项。 props 中配置。

使用props设置value、label、children

从后端拿到arr数据结构：

cityList: [
	{
		id: 1,
		name: '北京',
		child: [
			id: 11,
			name: '大兴区',
			child: [
				id: 111,
				name: '亦庄'
			]
		]
	}
]

vue文件代码

js

备注： 下面的写法等于行内的写法。

data: {
	optionProps: {
		value: 'id',
		label: 'name',
		children: 'child'
	}
}

等同于：

      
              
              
              
  备注：  指定数据中的哪一项作为value获取值 ，label的显示值。               

项目中使用： 组织机构连级下拉

所用的工具函数

1. 源数据
2. 数据特点：每一组数据，都有自己的id. 有自己归属的father id。 需要的数据格式 有二级的数据，加一个child [] 项。

{ 
distsCode: "330000"
distsName: "浙江省"
fdObjectid: "1"
id: "33000001"
name: "省公路与运输管理中心"
orgOrder: null
orgType: "province"
orgTypeName: "省级机构"
pId: "0"
remark: ""  }

3. 工具函数：

   使用方法：

/**
     * @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;
    },

4. 使用的标签和 键值指定 props

基础多选

为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 日期选择器

使用 el-time-select 标签，分别通过star、end和step指定可选的起始时间、结束时间和步长

总结：1 放置时间标签

2 准备变量结果值存储

    
  
  
  
  
  value2: new Date(2016, 9, 10, 18, 40),   一个变量存储选择结果值

@change =‘changeevent’ 写在时间标签内

Events

事件名	说明	参数
change	用户确认选定的值时触发	组件绑定值

8 DatePicker 日期选择器

和timepicker类似。

选择日

其他日期单位

选择日期范围

日期格式

如果是时间范围，则data是一个数组。

项目使用时间格式

**时间选择器遇到的问题：

日期，时间，选择器的标签不一样，转换显示格式的时候，可能需要更换标签。

value-format=“timestamp” 关于后台传递datatime格式的时间字段

后台数据报错，先看报错信息。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LMIQPMYH-1600870725459)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1598505380338.png)]

2020.0827 出现数据库格式无法校验成功。

原因是：

9 Upload 上传

使用： 放置上传标签

总结： 一个upload标签， 所有的属性和方法都放到里面。

包含接口的调试。

  点击上传
  
只能上传jpg/png文件，且不超过500kb

上传功能：包含图片。world excel 等文件的上传。

下载功能： 查看文件的头部的项目总结。

项目使用：

10 Form 表单 综合

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker

form

form使用规则

v-model="formInline.user"

一般用于 以数组形式保存form的全部的用户选择的值。

数据绑定

el-form :model=“formInline”

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-f8DLCxyc-1600870725459)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597332771898.png)]

对齐方式

通过设置 label-position 属性可以改变表单域标签的位置，可选值为 top、left，当设为 top 时标签会置于表单域的顶部

  在form上设置

表单验证

实现校验成功 需要这两个属性配合使用。

:rules=“rules” ref=“ruleForm”

一个注入规则，一个点击时，校验，合格则返回一个布尔值。

:model=“ruleForm” 灌入数据

:rules=“rules” 灌入验证规则

ref=“ruleForm” 获取指定的dom。 注意点： 如果修改变量名，下面按钮的传值也要跟这变，

item项：

prop="name1 是 rules中的name1 验证
v-model=“ruleForm.name”

提交按钮要在form中。

​ [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-doVcYMOi-1600870725460)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597337305932.png)]

 resetForm(formName) {  这里接受的时形参。 对应错误将找不到方法。
 
       this.$refs[formName].resetFields();
  }

rule规则

:rules 对应规则。 prop 对应data中的值。

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必须为数字值'}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yq4Pwxp1-1600870725461)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597338848585.png)]

rule的 item写法

注意点： 双引号和单引号的问题 :rules 对应规则。 prop 对应data中的值。

自定义表单验证

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NIZK46IG-1600870725462)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597507647163.png)]

自定义验证与form验证的区别是data规则自定义部分

  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" }],
      },
    };
  },

validator 新属性。 用于自定义配置。 和 trigger触发方式

项目使用：

第一：

在data中定义规则，注意不是return之中。

data() {

//定义规则

return { }

}

第二：

配置触发

  rolerule: {
            name: [ { required: true, message: '角色名称不可重复', trigger: 'blur' },
  配置属性validator-------->  {validator: checkname, trigger: 'blur' }, ],
                code: [{ required: true, message: '必填项', trigger: 'blur' }],
               },

第三

回调函数，抛出错误方法

return callback(new Error(‘年龄不能为空’));

  var checkname = (rule, value, callback) => {
      console.log(value)
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
        setTimeout(() => {
         
        }, 1000);


      };

关于自定义验证的必须条件 callback(); < — 必须reture

form表单的和layout的配合使用

可能出现的问题： input输入中文的时候， 输入框可能布局变化，可能高度变化。 解决方案：不用layout布局。

    
      
      
        
        
          
            
          
          
        
       
      
        
          新增
          导出
        
        
      
      
    

11 穿梭框

1.基础使用

 
 

  data: [
  {"key":8,
  "label":"备选项 8",
  "disabled":false},
  ],                         //第一个数组是待选项model   对象中包含三个属性：key label disable
   value: [1,2,3]       ,   //第二个数组是已选项data

两侧默认选中。

@change=“handleChange”

   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}
          
        );
      },

自定义数据格式

标准数据是： label value disable ; 如果不是标准数据，可以props中指定。

: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中有重复的value时，会报错。

value,有重复的值，不会报错。

第三部分： Data

1 Table 表格

在table中 prop 是data值

当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。

 
      
      
      
      
      
      
      
      
      
      
    
    
    
      tableData: [{
                 date: '2016-05-02',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1518 弄'
               }, {
                 date: '2016-05-04',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1517 弄'
               }, {
                 date: '2016-05-01',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1519 弄'
               }, {
                 date: '2016-05-03',
                 name: '王小虎',
                 address: '上海市普陀区金沙江路 1516 弄'
               }

父标签 注入数据

prop=“name” //注入数据
label=“姓名” // 表格名字
width=“180”>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5noaSoLb-1600870725462)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597335282253.png)]

2 斑马纹的表格

el-table 中直接放入属性： stripe（ n. 条纹，斑纹；种类）

3 带边框表格

el-table 中直接放入属性： border

4 带状态表格 高亮行背景色

根据数据状态添加背景色

可以通过指定 Table 组件的 row-class-name 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。

 
      
      
      methods: {
      tableRowClassName({row, rowIndex}) {

        if (row.active === 0) {
          return 'warning-row';
        } else {
          return 'success-row';
        }
      }
    },   
      

tableRowClassName 添加事件， 回调参数是每行的数据和index . 每条数据条用一次。 return class名字。

配合 css 区分颜色。

5 固定表头

只要在el-table元素中定义了height属性，即可实现固定表头的表格，而不需要额外的代码。

el-table 标签中 添加 height=“150” 一个高度。

6 固定列

横向内容过多时，可选择固定列

固定列需要使用fixed属性，它接受 Boolean 值或者left``right，表示左边固定还是右边固定。

方法是： 在column中 添加 fixed . 想固定那一列就添加在哪一行。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1uRXtTH7-1600870725463)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597515790460.png)]

7 传值 操作栏按钮

slot-scope=“scope”

场景： 表格的点击事件中， 传入本行的数据。

8 固定列和表头

横纵内容过多时，可选择固定列和表头。

固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。

9 流体高度

当数据量动态变化时，可以为 Table 设置一个最大高度。

通过设置max-height属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。

table 标签中 放置 max-height=“250” 控制最大高度。

10多级表头

只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ApDJnOZN-1600870725464)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597517626090.png)]

column 标签包裹

11 单选 点击变色 行

able 组件提供了单选的支持，只需要配置highlight-current-row属性即可实现单选。之后由current-change事件来管理选中时触发的事件，它会传入currentRow（ 点击行的数据），oldCurrentRow。如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。

关键点 : el-table 标签中

指定行背景色改变。两种方式：一种是点击表格，所在行变色。 一种是不惦记表格， 函数触发变色。

1. 点击表格变色： highlight-current-row 加属性即可。 如果想获取点击行的数据，方法：@current-change=“handleCurrentChange”

 handleCurrentChange(val) {
     
      console.log(val);
      this.currentRow_ = val;
    },

2 函数式变色：

 ref="singleTable"
 table标签加上ref  属性。获取dom指定表格
   
   
   

      选中第二行
      取消选择
    
    
    
      methods: {
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    
    
    
    

表格 首列 index显示

如果需要显示索引，可以增加一列el-table-column，设置type属性为index即可显示从 1 开始的索引号。

12 多选 获取多行的数据

选择多行数据时使用 Checkbox。

实现多选非常简单: 手动添加一个el-table-column，设type属性为selection即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来

关键点：

手动添加一个el-table-column，设type属性为selection即可。 可以进行多选。 如果想获取选中的几行数据。使用方法

方法 methods :

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();
      }
    },

和上面一样。 注意点： 方法使用需要指定tabel 。 ref属性加上。

​ ref=“multipleTable”

13 排序

在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false。可以通过 Table 的default-sort属性设置默认的排序列和排序顺序。可以使用sort-method或者sort-by使用自定义的排序规则。如果需要后端排序，需将sortable设置为custom，同时在 Table 上监听sort-change事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

第一种： 列排序 ，想那列可以排序，就在列上加上属性：

sortable 表明可以排序

第二种： 设置默认排序

:default-sort="{prop: ‘date’, order: ‘descending’}" 设置默认的 排序列 和 排序顺序

监听排序变化

列设置为可以排序后，监听事件，

 
    
    方法： 
      methods: {
change(val){
  console.log(val);

},

对列数据进行加后缀

对数组显示做处理

在本例中，我们还使用了formatter属性，它用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。

想处理哪一行： :formatter=“formatter” 绑定方法;

方法， 数据渲染是，自动过滤每一行，进行数据处理。 统一判断加后缀等。比如返回不同的按钮等。

  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。

第一种 拦截数据, 加图标

第二种 ; 拦截 使用组件 hober悬浮显示

第三种： 操作栏 事件获取行数据

16 展开行

当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。

过设置 type=“expand” 和 Scoped slot 可以开启展开行功能，el-table-column 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 Scoped slot 相同

总结： 方法是添加一行。 行类型设置 type=“expand”， 里面嵌套一个slot模板，将行数据写入。

17 树形数据与懒加载

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LTeZ8pvK-1600870725464)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597548837166.png)]

支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key。支持子节点数据异步加载。设置 Table 的 lazy 属性为 true 与加载函数 load 。通过指定 row 中的 hasChildren 字段来指定哪些行是包含子节点。children 与 hasChildren 都可以通过 tree-props 配置。

总结： 树形结构的判断首先是数据结构，如下

数据中出现children字段，判断为该行是树形，

{
          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 弄'
          }]
        }

tabel标签中设置 数据参数，和是否默认打开。

default-expand-all
    :tree-props="{children: 'children_', hasChildren: 'hasChildren'}">
    

children: 'children_ 设置数据。

18 自定义表头

通过设置 Scoped slot 来自定义表头。

总结： 上边的搜索框和下边的按钮可以分别设置。

方式就是table 上加上过滤条件。

search 是data中的值。 search: “” 。 空就是false.

每一条数据都经过输入框内容的过滤。然后渲染。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j0rVP6l6-1600870725465)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597550469688.png)]

上边的搜索框和下面的按钮，是透过添加一行。

slot-scope=“scope” 自定义出来的。

完整代码：

19 表尾合计行

总结： 两种方法，一个自动，一个自定义。

第一个：将show-summary设置为true就会在表格尾部展示合计行默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过sum-text配置），其余列会将本列所有数值进行求合操作，并显示出来。

第二种：

你也可以定义自己的合计逻辑。使用summary-method并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。

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)]

20 合并行或列

使用情景 : 多行或多列共用一个数据时，可以合并行或列

通过给table传入span-method方法可以实现合并行或列，方法的参数是一个对象，里面包含当前行row、当前列column、当前行号rowIndex、当前列号columnIndex四个属性。该函数可以返回一个包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。 也可以返回一个键名为rowspan和colspan的对象。

总结：

tabel中绑定一个方法： 方法中回调。

: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 开始）作为参数，返回值将作为索引展示。

总结： tabel中绑定一个属性。:index=“indexMethod”

方法中 定义一个自定义的逻辑。

methods: {
indexMethod(index) {
return index * 2;
}

22 tips 行内容多时，tips显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DMWLAJ0j-1600870725467)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1598542342597.png)]

总结： element ui 有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 标记 消息条数显示

基础用法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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” 冒号去掉就是绑定文字。

4 Avatar 头像

用图标、图片或者字符的形式展示用户或事物信息。

形象标签

通过 shape 和 size 设置头像的形状和大小。

展示类型

支持三种类型：图标、图片和字符

标签找中放 图片，文字和表情。

 




   user 

第四部分：Notice提醒

1 Alert 警告

页面中的非浮层元素，不会自动消失。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qRhx9ccr-1600870725468)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597074945072.png)]

Alert 组件提供四种主题，由type属性指定，默认值为info。

  
  

放到页面中就显示。

页面加载，就会显示。点击可以关闭。 适用场景： 页面加载的提醒。

2 Loading 加载

分为三种： table 指令 和服务

局部加载效果

Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令v-loading，只需要绑定Boolean即可。

场景1 ： el-table 中的。 充当一个配置项 loading绑定一个data 布尔值。路网项目中使用。

看下面， 直接卸载table中， 布尔值控制。

整页加载

指令方式

总结：

在按钮中v-loading.fullscreen.lock=“是或者是否” 加入属性。并用一个方法控制 布尔值的 是与否

当使用指令方式时，全屏遮罩需要添加fullscreen修饰符（遮罩会插入至 body 上），此时若需要锁定屏幕的滚动，可以使用lock修饰符；当使用服务方式时，遮罩默认即为全屏，无需额外设置。

dom部分

    指令方式
  
  
  
  data部分控制显示
    fullscreenLoading: false
    一个方法
    
     openFullScreen1() {
        this.fullscreenLoading = true;
        setTimeout(() => {
          this.fullscreenLoading = false;
        }, 2000);
      },

触发方式： 需要一个点击事件。例如按钮来触发

服务方式

比较简单一点： 是需要一个事件。

  
    服务方式
  

每次使用，声明一个loadding . loading.close();方法是关闭。

 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(‘参数错误，请重新输入’);

参数type控制显示警告还是成功的样式。

this.$message({
          message: '恭喜你，这是一条成功消息',
          type: 'success'
        });
        
   this.$message({
          message: '警告哦，这是一条警告消息',
          type: 'warning'
        });

可关闭

弹窗可以手动关闭。

常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。

Element 注册了一个$message方法用于调用，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

methods: {
      open() {
        this.$message('这是一条消息提示');
      },
      
      
      mounted(){
      this.openVn()
    }  

就一个方法， 可以直接mounted中调用。 使用方便。 使用场景： 在提交成功时的提醒。 3s后自动消失。也可以主动关闭。

4 MessageBox 弹框 this.$alert

使用： 也是直接调用方法，传入参数。

定位：弹出简单的内容

这里表明： 有三个方法。

alert 只有确定

confirm 确定和取消

prompt prompt() 方法用于显示可提示用户进行输入的对话框。 弹出一个输入框。

从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。

从场景上说，MessageBox 的作用是美化系统自带的 alert、confirm 和 prompt，因此适合展示较为简单的内容。如果需要弹出较为复杂的内容，请使用 Dialog。

消息提示

调用$alert方法即可打开消息提示，它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，message和title。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SR0K9n2d-1600870725469)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597079854335.png)]

弹出位置是屏幕中间。 使用方法是this.$alert(） 直接调用方法。 和message使用 方法是一样的。

 this.$alert('这是一段内容', '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
                         console.log(action);// 在这里判断点击了是还是否
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });

点击确认消息

提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。

总结： 也是一个方法，类似propose then和catch,分两种情况。

5 Notification 通知

右侧闯入提醒。

悬浮出现在页面角落，显示全局的通知提醒消息。

第五部分

Dropdown 下拉菜单

dropdown 标签

command 回调事件

    
      
        下拉菜单
        
      
      
        黄金糕
        狮子头
        螺蛳粉
        双皮奶
        蚵仔煎
      
    
    
    
    

其他弹窗

注意点：

dialog配置项的写法：

Attributes
参数	说明	类型	可选值	默认值
visible	是否显示 Dialog，支持 .sync 修饰符	boolean	—	false

注意加 ： center。 否则报错

1 Dialog 对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

Dialog 弹出一个对话框，适合需要定制性更大的场景。

基本用法

需要设置visible属性，它接收Boolean，当为true时显示 Dialog。Dialog 分为两个部分：body和footer，footer需要具名为footer的slot。title属性用于定义标题，它是可选的，默认值为空。最后，本例还展示了before-close的用法。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-C8LGmRNC-1600870725470)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597081198974.png)]

弹框层，由一个布尔值控制。 body foot两部分。

body可以构建自己的dom。 可以是form 表单， 可以是表格。

foot两个按钮。

<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>

项目使用：

弹窗框的标题，变量替换

:title="加变量 "

Events

事件名称	说明	回调参数
open	Dialog 打开的回调	—
opened	Dialog 打开动画结束时的回调	—
close	Dialog 关闭的回调	—
closed	Dialog 关闭动画结束时的回调

Dialog 两层对话框

如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。

正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，我们提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q46VquNX-1600870725470)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597591986023.png)]

    

      
        
我是二级内容
      
     
        
我是一级内容
      

        取 消
        打开内层 Dialog
      

    

总结：

二级弹窗，就是在原本放一级内容的 区域，有放入要给dialog标签，配置 append-to-body属性。

两个布尔值控制。一个内，一个外。

二级弹窗配置项，和一级一样使用。

        
我是二级内容

2 Tooltip文字提示

作用： 悬浮就显示

使用方法： tooltip 标签包裹即可。content动态绑定提示内容。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b8ZRZXvx-1600870725471)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597081822059.png)]

基础用法

在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。

 
      下右 
    

总结： content控制显示内容。placement控制显示方向。

3 Popover 弹出框

基础用法

Popover 的属性与 Tooltip 很类似，它们都是基于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>

总结： 弹窗框，嵌套table。 table渲染的数据灌入使用。 property指定数据键值对。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3EXxlpbK-1600870725472)(C:\Users\luyunxiao\AppData\Roaming\Typora\typora-user-images\1597082580341.png)]

4 Popconfirm 气泡确认框

  删除

Events

事件名称	说明	回调参数
onConfirm	点击确认按钮时触发	—
onCancel	点击取消按钮时触发	—

Divider 分割线

第六部分 Others

1 ¶Timeline 时间线

基础用法

使用el-timeline时间线标签 和组标签 el-timeline-item 。

属性：可以自定义图标，颜色，时间戳，标题。 上线显示位置。

​ 时间线 排序属性。

   
        

        {
    {activity.content}}
        
        
      
      
      
   
      

Navigation 导航菜单

基础用法：

 
      处理中心
      
        
        选项1
        选项2
        选项3
      
      消息中心
      
        订单管理
      

    
--------方法--------------
    
methods: {
    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

子项有几种表现形式：
01. 链接形式
    
        订单管理
      
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， 同时切换时， 页面会同时显示父 ，子级内容。 子级内容会显示在 的位置，并替换掉view标签。

这里：可以使用element插件的上下布局。

Header Main :default-active="activeIndex"// 默认显示的bar class="el-menu-demo" // 自定义class mode="horizontal" // 排列方式 @select="handleSelect"// 点击的回调 > 处理中心 我的工作台 选项1 选项2 选项3 消息中心 订单管理

--------方法--------------

methods: {
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

子项有几种表现形式：

1. 链接形式
   
   订单管理
   
   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， 同时切换时，  页面会同时显示父 ，子级内容。  子级内容会显示在  的位置，并替换掉view标签。

这里：可以使用element插件的上下布局。


Header
Main