[JavaScript知识库]elementUI 框架组件

elementUI 框架学习笔记

1、创建一个vue-cli脚手架

• 初始化：vue init webpack
• 安装包：npm install
• 安装elementui：npm i element-ui -S
• 安装axios：npm install axios -S
• 安装router：npm install vue-router -S，并配置路由。
• 引入组件，配置路由。
• 启动项目：npm run dev

2、Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构：

• <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。
  • 属性：
    • direction：指定子元素的排列方式，string类型，属性值：horizontal / vertical
• <el-header>：顶栏容器。
  • 属性：
    • height：顶部栏的高度，默认是60px，string类型。
• <el-aside>：侧边栏容器。
  • 属性：
    • width：侧边栏的宽度，默认是300px，string类型。
• <el-main>：主要区域容器。
• <el-footer>：底栏容器。
  • 属性：
    • height：页脚的高度，默认值是60px，string类型。

<template>
    <el-container direction="vertical">
        <el-header height="100px">
            <h1>头部内容</h1>
        </el-header>
        <el-container>
            <el-aside width="800px">
                <h1>侧边内容</h1>
            </el-aside>
            <el-main>
                <h1>主要内容</h1>
            </el-main>
        </el-container>
        <el-footer height="200px">
            <h1>页脚</h1>
        </el-footer>
    </el-container>
</template>

<style>
.el-container{
    background: #B3C0D1;
    text-align: center;
    border: 1px solid red;
}
.el-header{
    background: #B3C0D1;
    text-align: center;
    border: 1px solid blue;
}
.el-aside{
    background: #B3C0D1;
    text-align: center;
    border: 1px solid green;
}
.el-main{
    background: #B3C0D1;
    text-align: center;
    border: 1px solid yellow;
}
.el-footer{
    background: #B3C0D1;
    text-align: center;
    border: 1px solid #bfa;
}
</style>

<script>
export default {
    name: "Demo01",
};
</script>

3、Layout 布局

? 通过基础的 24 分栏，迅速简便地创建布局。通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。如果一行中的列数之和大于24，则自动换行。

<el-row :gutter="0">
    <el-col :span="12">12</el-col>
    <el-col :span="12">12</el-col>
</el-row>

一行分为24分，其中有2列，每一列占12分。

el-row属性：

el-col属性：

4、按钮 button

? 使用 el-button标签来定义一个按钮，使用type、plain、round和circle属性来定义 Button 的样式。存在多种按钮，例如基础按钮、文字按钮、图标按钮、按钮组、加载按钮。

基础按钮：

? 直接使用 el-button 标签，然后使用type使用执行按钮的类型。

<el-button type="danger">结束考试</el-button>

文字按钮：

? 直接将 type 属性指定为 text 即可。

<el-button type="text">结束考试</el-button>

图标按钮：

? 设置icon属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用i标签即可，可以使用自定义图标。

<el-button type="primary" icon="el-icon-delete"></el-button> <!-- 普通的图标按钮-->
<el-button type="primary" icon="el-icon-search">搜索</el-button>  <!-- 文字在右边的按钮-->
<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button> <!-- 文字在左边的按钮-->

按钮组：

? 使用<el-button-group>标签来嵌套你的按钮。

<el-button-group>
    <el-button type="primary" icon="el-icon-arrow-left">上一页</el-button>
    <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
</el-button-group>

加载按钮：

? 要设置为 loading 状态，只要设置loading属性为true即可。

<el-button type="primary" :loading="true">加载中</el-button>

按钮的属性：

5、链接

? 通过 el-link 这个标签就行链接和跳转。

<el-link href="https://www.baidu.com" target="_blank">默认链接</el-link>

链接属性：

6、表单系列

6.1、input 输入框

? 使用 el-input标签来定义一个输入框，用于接收用户的输入的数据。一般输入框会绑定一个 v-model来双向绑定数据。

6.1.1、基础用法

<template>
    <div>
        <el-row :gutter="10">
            <el-col :span="5">
                <el-input v-model="username" type="text" placeholder="请输入用户名" clearable></el-input>
                用户名:{{username}}
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="5">
                <el-input v-model="password" type="password" placeholder="请输入密码" clearable></el-input>
                密码:{{password}}
            </el-col>
        </el-row>
    </div>
</template>
<script>
export default {
    name: "Demo02",
    data(){
        return{
            username: "",
            password: ""
        }
    }
}
</script>

6.1.2、带icon的输入框

prefix-icon：
在input内的前面添加一个icon图标。

<el-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="msg">
</el-input>

suffix-icon：在input内的最后面添加一个icon图标。

<el-input
    placeholder="请选择日期"
    suffix-icon="el-icon-date"
    v-model="date">
</el-input>

slot：

<el-input
    placeholder="请选择日期"
    v-model="input3">
    <!-- 在输入框的后面添加一个图标-->
    <i slot="suffix" class="el-input__icon el-icon-date"></i>
</el-input>
<el-input
    placeholder="请输入内容"
    v-model="input4">
    <!-- 在输入框的前面添加一个图标-->
    <i slot="prefix" class="el-input__icon el-icon-search"></i>
</el-input>

6.1.3、文本域输入框

<el-input
    type="textarea"
    :rows="2"
    placeholder="请输入内容"
    v-model="textarea">
</el-input>

属性：

6.1.4、复合型输入框

? 可前置或后置元素，一般为标签或按钮。

<!-- 前置内容-->
<el-input type="text"
          v-model="url"
          placeholder="请输入网址">
    <template slot="prepend">Http://</template>
</el-input>
<!-- 后置内容-->
<el-input type="text"
          v-model="url"
          placeholder="请输入网址">
    <template slot="append">Http://</template>
</el-input>

一般还可以使用按钮进行组合复合输入框。

<el-input placeholder="请输入内容" v-model="input3">
    <el-select v-model="select" slot="prepend" placeholder="请选择">
        <el-option label="餐厅名" value="1"></el-option>
        <el-option label="订单号" value="2"></el-option>
        <el-option label="用户电话" value="3"></el-option>
    </el-select>
    <el-button slot="append" icon="el-icon-search"></el-button>
</el-input>

6.2、单选按钮

? 使用el-radio标签用来表示一个单选按钮。

<template>
    <div>
        <el-radio v-model="radio" :label="1">备选项</el-radio>
        <el-radio v-model="radio" :label="2">备选项</el-radio>
    </div>
</template>

<script>
export default {
    name: "Demo01",
    data(){
        return{
            radio: 1
        }
    }
}
</script>

label属性就是绑定单选按钮的值，它的值类型可以是number、string、boolean。除了使用string类型，其他两个都要使用 :label 进行绑定。

6.2.1、单选按钮组

? 使用el-radio-group标签，将单选按钮进行分组。

<el-radio-group v-model="radio1">
  <el-radio :label="1">选项1</el-radio>
  <el-radio :label="2">选项2</el-radio>
  <el-radio :label="3">选项3</el-radio>
  <el-radio :label="4">选项4</el-radio>
</el-radio-group>

在一组的选项中，只要选择一个选项，其他选项就会进行排斥。

单选按钮组还给我们提供了一个change事件，当选择发生改变时就会触发对应的函数，它有这个参数是单选选中的值：

<el-radio-group v-model="radio1" @change="action">
  <el-radio :label="1">选项1</el-radio>
  <el-radio :label="2">选项2</el-radio>
  <el-radio :label="3">选项3</el-radio>
  <el-radio :label="4">选项4</el-radio>
</el-radio-group>
<script>
export default {
    name: "Demo01",
    data(){
        return{
            radio1: 1,
            radio2: 1,
            radio3: 1

        }
    },
    methods: {
        // 会将选中的值作为参数传入
        action(value){
            alert(value);
        }
    }
}
</script>

6.2.2、按钮单选

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

<el-radio-group v-model="radio3">
  <el-radio-button :label="1">按钮1</el-radio-button>
  <el-radio-button :label="2">按钮2</el-radio-button>
  <el-radio-button :label="3">按钮3</el-radio-button>
  <el-radio-button :label="4">按钮4</el-radio-button>
</el-radio-group>

6.2.3、属性

el-radio属性：

单选change 事件：当绑定的值发生改变时，触发该事件，事件会有一个选中的选项的值作为参数传递给回调函数。

6.3、多选按钮

? 使用 el-checkbox 标签，实现可以选择多个选项。

<el-checkbox v-model="hobby" :label="1">篮球</el-checkbox>
<el-checkbox v-model="hobby" :label="2">羽毛球</el-checkbox>
<el-checkbox v-model="hobby" :label="3">游戏</el-checkbox>
<el-checkbox v-model="hobby" :label="4">女朋友</el-checkbox>

6.3.1、多选按钮组

? 使用 el-checkbox-group标签将不同的多选按钮进行分组。

<el-checkbox-group v-model="hobby"
                   min="1"
                   max="2">
    <el-checkbox :label="1">篮球</el-checkbox>
    <el-checkbox :label="2">羽毛球</el-checkbox>
    <el-checkbox :label="3">游戏</el-checkbox>
    <el-checkbox :label="4">女朋友</el-checkbox>
</el-checkbox-group>

可以指定min和max属性，设置为最少选几个和最多选几个。

6.3.2、indeterminate 状态

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

<template>
    <div>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="checkAllAction">全选</el-checkbox>
        <br />
        <el-checkbox-group v-model="items" @change="checkItemAction">
          <el-checkbox v-for="item in city" :label="item">{{item}}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>

<script>
const citys = ["重庆","上海","北京","大连","成都"];
export default {
    name: "Demo02",
    data(){
        return{
            checkAll: false,
            city: citys,
            items: [],
            isIndeterminate: false
        };
    },
    methods: {
        // 检车全选按钮是否发生改变
        checkAllAction(value){
            this.items = value ? this.city : [];
            // 如果改变就将不确定状态改为false
            this.isIndeterminate = false;
        },
        checkItemAction(value){
            let length = value.length;
            // 判断是否全部被选中
            this.checkAll = length === this.city.length;
            // 如果部分选中就激活不确定状态，反之
            this.isIndeterminate = length > 0 && length < this.city.length;
        }
    }
}
</script>

6.3.3、按钮多选

? 使用 el-checkbox-button 将多选的设置为按钮选择。

<el-checkbox-group v-model="hobby">
    <el-checkbox-button label="篮球">篮球</el-checkbox-button>
    <el-checkbox-button label="羽毛球">羽毛球</el-checkbox-button>
    <el-checkbox-button label="游戏">游戏</el-checkbox-button>
    <el-checkbox-button label="女朋友">女朋友</el-checkbox-button>
</el-checkbox-group>

6.3.4、属性

checkbox属性：

6.4、input-number计数器

只需要在el-input-number元素中使用v-model绑定变量即可，变量的初始值即为默认值。

<el-input-number v-model="number" @change="numberCheckAction" :min="1" :max="10" label="label"></el-input-number>

属性：

事件：

6.5、switch开关

<el-switch v-model="active"
           active-color="#13ce66"
           inactive-color="#ff4949"
></el-switch>

属性：

6.6、Select 选择器

? 使用 el-select标签来提供用户来选择，子元素为 el-option标签。

<el-select v-model="selectValue" placeholder="请选择">
    <el-option
        v-for="item in select"
        :label="item"
        :value="item"
    ></el-option>
</el-select>

select的属性：

select的事件：

el-option的属性：

自定义选项的模板：

? 将自定义的 HTML 模板插入el-option的 slot 中即可，显示自己想要的选项模板

<el-option
    v-for="(item,index) in select"
    :label="item"
    :value="item">
    <span style="float: left">{{ item}}</span>
    <span style="float: right; color: #8492a6; font-size: 13px">{{ index }}</span>
</el-option>

6.7、Cascader 连级选择器

? 只需为 Cascader 的options属性指定选项数组即可渲染出一个级联选择器。通过props.expandTrigger可以定义展开子级菜单的触发方式。

<template>
    <div>
        <el-cascader
            v-model="result"
            :options="items">
        </el-cascader>
    </div>
</template>
<script>
export default {
    name: "Demo04",
    data(){
        return{
            items: [
                {
                    value: 1,
                    label: "运动",
                    children: [
                        {
                            value: "篮球",
                            label: "篮球"
                        },
                        {
                            value: "羽毛球",
                            label: "羽毛球"
                        },
                        {
                            value: "乒乓球",
                            label: "乒乓球"
                        }
                    ]
                },
                {
                    value: 2,
                    label: "食物",
                    children: [
                        {
                            value: "鸡肉",
                            label: "鸡肉"
                        },
                        {
                            value: "鱼肉",
                            label: "鱼肉"
                        },
                        {
                            value: "鸭肉",
                            label: "鸭肉"
                        }
                    ]
                },
                {
                    value: 3,
                    label: "游戏",
                    children: [
                        {
                            value: "LoL",
                            label: "LoL"
                        },
                        {
                            value: "穿越火线",
                            label: "穿越火线"
                        },
                        {
                            value: "QQ飞车",
                            label: "QQ飞车"
                        }
                    ]
                }
            ],
            result: []
        }
    }
}
</script>

== options 属性的属性值必须是一个对象数组，一个对象表示一个选项，如果存在子级选项，就在选项对象中添加一个 children属性，这个属性也是一个数组，数组中包含子级的对象，每一个对象中都要包含 value和 label 属性，value属性就是选中时的值，label就是显示的文本。==

这个选择器的触发方式有两种，默认是点击时触发，可以设置props.expandTrigger属性，设置为鼠标移入就显示，:props="{ expandTrigger: 'hover' }"。

自定义节点内容：

? 可以通过scoped slot对级联选择器的备选项的节点内容进行自定义，scoped slot会传入两个字段 node 和 data，分别表示当前节点的 Node 对象和数据。

<el-cascader
    v-model="result"
    :props="props"
    :show-all-levels="false"
    collapse-tags
    :options="items">
    <template slot-scope="{node,data}">
        <span>{{data.label}}</span>
		<!-- 判断是否为叶子节点-->
        <span v-if="!node.isLeaf">{{data.children.length}}</span>
    </template>
</el-cascader>

级联面板：

<el-cascader-panel :options="items"></el-cascader-panel>

用法与级联选择器一样。

el-cascader的属性：

el-cascader的方法：

getCheckedNodes()，获取选中的节点，参数是一个布尔值，表示是否只是叶子节点，默认值为 false。

props的配置：

6.8、TimePicker 时间选择器

固定时间：

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

<template>
    <div>
        <el-time-select v-model="value"
                        :picker-options="picker"
                        placeholder="time">
        </el-time-select>
    </div>
</template>

<script>
export default {
    name: "Demo05",
    data(){
        return{
            value: "",
            picker: {
                start: '00:00',  // 开始的时间
                step: '01:00',   // 步长
                end: '23:59'     // 结束的时间，如果结束的时间比开始的时间大，就不会显示
            }
        }
    }
}
</script>

任意时间点：

<template>
    <div>
        <el-time-picker v-model="value"
                        :picker-options="picker"
                        placeholder="time">
        </el-time-picker>
    </div>
</template>

<script>
export default {
    name: "Demo05",
    data(){
        return{
            value: "",
            picker: {
                selectableRange: '00:00:00 - 23:59:59', // 必须精确到秒
            }
        }
    }
}
</script>

选择方式有两种，默认是滑动鼠标进行选择。另一种是使用箭头进行选择，只需在标签中添加 arrow-control属性。

任意时间范围：

? 添加is-range属性即可选择时间范围，同样支持arrow-control属性。

<el-time-picker v-model="value"
                is-range
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                range-separator="至"
                placeholder="time">
</el-time-picker>

属性：

6.9、DatePicker 日期选择器

? 使用 el-date-picker标签，进行日期的选择。

<el-date-picker v-model="date"
                type="date"
                placeholder="日期">

</el-date-picker>

选择日期范围：

<el-date-picker v-model="date"
                type="daterange"
                range-separator=" - "
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="dateAction"
                placeholder="日期">

</el-date-picker>

日期格式：

? 使用format指定输入框的格式；使用value-format指定绑定值的格式。

<el-date-picker v-model="date"
                type="daterange"
                range-separator=" - "
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="dd-MM-yyyy"
                value-format="yyyy-MM-dd"
                @change="dateAction"
                placeholder="日期">
</el-date-picker>

6.10、DateTimePicker 日期时间选择器

? 通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。

<el-date-picker v-model="date"
                type="datetime"
                value-format="yyyy-MM-dd hh:mm:ss"
                @change="dateAction"
                placeholder="time">
    
</el-date-picker>

日期和时间范围：

? 设置type为datetimerange即可选择日期和时间范围。

<el-date-picker v-model="date"
                type="datetimerange"
                value-format="yyyy-MM-dd hh:mm:ss"
                @change="dateAction"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                placeholder="时间">

</el-date-picker>

属性：

6.11、upload上传

? 使用 el-upload标签来进行用户的文件的上传。

<el-upload
    class="upload-demo"
    action="https://www.demo.com/posts/"
    :limit="3"
    :file-list="[{name: 'name', url: 'url'}, {name: 'name2', url: 'url'}]" multiple="">
    <el-button size="small" type="primary">点击上传</el-button>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

属性：

6.12、评分

? 使用 el-rate标签进行选择评分。

<el-rate v-model="rate"
         @change="changeAction">
</el-rate>

? 评分默认被分为三个等级，可以利用颜色数组对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用colors属性设置，而它们对应的两个阈值则通过 low-threshold 和 high-threshold 设定。你也可以通过传入颜色对象来自定义分段，键名为分段的界限值，键值为对应的颜色。

属性：

6.13、Form 表单

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

<template>
    <el-form ref="form" :model="form"  label-width="80px">
        <el-form-item label="活动名称">
            <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="活动区域">
            <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送">
            <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
            <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    name: "Demo02",
    data(){
        return{
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            }
        }
    },
    methods: {
        onSubmit(){
            alert("提交成功!");
        }
    }
}
</script>

Form表单的属性：

表单校验：

• 创建一个校验规则对象

data(){
    return{
        formValue:{
            username: "",
            password: "",
        },
        // 表单校验规则对象
        formRule:{
            // 每一个校验的对象，与表单中每项绑定的值一一对应
            // 可以有多个校验规则，所以是个数组，数组中存放校验对象
            // required必填，message:校验失败后的提示文字；trigger：触发方式，blur表示失去焦点时触发
            username: [{required: true, message: '输入的登录账号不能为空', trigger: 'blur'}],
            password: [{required: true, message: '输入的登录账号不能为空', trigger: 'blur'}]
        }
    }
},

• 表单中注入规则

在表单中通过rules属性，将创建的表单校验规则对象注入进去。

<el-form ref="form"
         :model="formValue"
         label-position="left"
         :rules="formRule"
         label-width="55px">

• 在每一表单项上，通过prop属性指定校验规则，指定的是校验规则对象中的属性。

<el-form-item label="账号"
              prop="username">
    <el-input v-model="formValue.username"
              placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item label="密码"
              prop="password">
    <el-input v-model="formValue.password"
              show-password
              placeholder="请输入密码"></el-input>
</el-form-item>

• 全局校验：当点击提交按钮是通过点击事件来进行表单的校验。

submitAction(){
// 获取表单，然后通过validate方法进行校验，它有一个回调函数，回调参数就是校验的结果，如果通过校验就返回true，否则返回false
    this.$refs['form'].validate((result)=>{
        if (result){
            alert("通过校验");
        }else {
            alert("校验失败");
        }
    });
}

自定义校验规则：

• 在data中创建一个函数对象。

data(){
    // 自定义的一个校验函数
    // rule可忽略，value需要校验的值，callback回调函数
    let checkPassword = (rule,value,callback)=>{
        if (value.trim()=== ""){
            // 如果不校验通过可以通过new Error对象，将提示文字通过参数传入
            callback(new Error("输入登录密码不能为空"));
        }else {
            // 如果callback的参数为空就表示校验通过
            callback();
        }
    };
},

• 使用自定义的校验规则

formRule:{
    // 每一个校验的对象，与表单中每项绑定的值一一对应
    // 可以有多个校验规则，所以是个数组，数组中存放校验对象
    // required必填，message:校验失败后的提示文字；trigger：触发方式，blur表示失去焦点时触发
    username: [{required: true, message: '输入的登录账号不能为空', trigger: 'blur'}],
    password: [{validator:checkPassword, trigger: 'blur'}]
}

通过使用校验对象的validator属性，属性值为自定义的校验函数。

表单的方法：

7、表格

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

<template>
    <div>
        <el-table
            :data="items"
            style="width: 100%">
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    name: "Demo04",
    data() {
        return{
            items:[
                {date:'2019-10-01',name:'张三',address:'重庆科技学院'},
                {date:'2019-10-02',name:'李四',address:'重庆科技学院'},
                {date:'2019-10-03',name:'王五',address:'重庆科技学院'},
                {date:'2019-10-04',name:'赵六',address:'重庆科技学院'},
                {date:'2019-10-05',name:'田七',address:'重庆科技学院'}
            ]
        }
    }
}
</script>

el-table的属性：

el-table-column的属性：

表格序号：

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

<el-table-column
    type="index"
    label="序号"
    width="50">
</el-table-column>

选择框：

? 设type属性为selection即可。

<el-table-column
    type="selection"
    width="50">
</el-table-column>

自定义表头：

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

<el-table-column
    align="right">
    <template slot-scope="scope" slot="header">
        <el-input v-model="searchValue"
                  size="mini"
                  placeholder="请输入关键字!"/>
    </template>
    <template slot-scope="scope">
        <el-button
            size="mini">修改</el-button>
        <el-button
            size="mini"
            type="danger">删除</el-button>
    </template>
</el-table-column>

表格的事件：

8、Tag标签

? 使用 el-tag定义一个标签。

<el-tag type="success">标签二</el-tag>

属性：

事件：

9、Tree 树形控件

? 使用el-tree创建一个树形控件。

<el-tree
    :data="data"></el-tree>

属性：

事件：

10、分页

? 使用 el-pagination来创建一个分页组件。

<el-pagination
    layout="prev, pager, next"
    :total="20">
</el-pagination>

? 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。prev表示上一页，next为下一页，pager表示页码列表，除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量。一般吧llayout设置为 layout="sizes,prev, pager, next,jumper,->,total"

属性：

事件：

11、标记

? 使用 el-badge 标签创建一个标记。

<el-badge :value="12" class="item">
    <el-button size="small">评论</el-button>
</el-badge>

属性：

12、Avatar头像

? 使用一个 el-avatar来创建一个头像标签。

<el-avatar :size="100"
           shape="square"
           src="../../../static/photo.jpg"></el-avatar>

属性：

13、alert 警告

? 使用 el-alert 创建一个警告标签。

<el-alert
    title="操作成功!"
    type="success">
</el-alert>

属性：

14、message 提示消息

? 在js代码中通过 this.$message('这是一条消息提示');提示一条消息。

clickAction(){
    this.$message("这是一条提示消息");
}

消息框除了可以传入一个字符串作为提示消息，也可以传入一个对象来配置这个消息。

this.$message({
    message: "这是一条提示消息!",  // 消息的正文
    type: "success",   // 消息的类型 success/warning/info/error，默认是info
    showClose: true,   // 设置消息可否手动关闭，不设置手动关闭，默认3秒后自动关闭，默认不能关闭
    duration: 1000,     // 设置自动关闭的时间，单位是毫秒
    center: true,        // 设置提示文字是否居中
    // iconClass: "el-icon-delete-solid" 自定义图标的类名，会覆盖 type
    offset: 500,        // 设置消息图窗口顶部的偏移量，默认是20
    onClose: (message)=>{       // 当消息提示关闭的回调函数，参数是message这个实例
        console.log(message);
        alert("消息被关闭"+message);
    }
});

15、message提示框

? 调用$alert方法即可打开消息提示，它模拟了系统的 alert，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，message和title。值得一提的是，窗口被关闭后，它默认会返回一个Promise对象便于进行后续操作的处理。若不确定浏览器是否支持Promise，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。

// 参数一：消息的正文
// 参数二：消息的标题
// 参数三：一个对象，用于配置消息框
this.$alert("消息提示","提示",{
    confirmButtonText: "确定"
});

? 调用$confirm方法即可打开消息提示，它模拟了系统的 confirm。Message Box 组件也拥有极高的定制性，我们可以传入options作为第三个参数，它是一个字面量对象。type字段表明消息类型，可以为success，error，info和warning，无效的设置将会被忽略。注意，第二个参数title必须定义为String类型，如果是Object，会被理解为options。在这里我们用了 Promise 来处理后续响应。

this.$confirm("确定进行操作吗?","提示",{
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "success",
    center: true  // 提示居中显示
}).then(()=>{
    // 点击确定后进行的操作
    this.$message({
        message: "确定操作!",
        type: "success",
        offset: 300,
        center: true
    });
}).catch(()=>{
    // 点击取消进行的操作
    this.$message({
        message: "不操作!",
        type: "error",
        offset: 300,
        center: true
    });
});

? 调用$prompt方法即可打开消息提示，它模拟了系统的 prompt。可以用inputPattern字段自己规定匹配模式，或者用inputValidator规定校验函数，可以返回Boolean或String，返回false或字符串时均表示校验未通过，同时返回的字符串相当于定义了inputErrorMessage字段。此外，可以用inputPlaceholder字段来定义输入框的占位符。

this.$prompt("请输入您的邮箱","提示",{
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    // 输入的校验规则，是一个正则表达式对象
    // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
    // 也可以通过inputValidator自定义一个校验规则，参数是输入值，返回true就是校验成功，如果返回字符串就是校验不成功，并且返回的字符串会覆盖inputErrorMessage
    inputValidator: (value)=>{
        let regExp = /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/;
        return regExp.test(value);
    },
    // 校验失败的提示文字
    inputErrorMessage: "邮箱的格式不正确!",
    // 占位符
    inputPlaceholder: "请输入邮箱!"
}).then((({value})=>{
    // 当点击确定并输入正确后的操作
    this.$message({
        message: "输入的邮箱为:"+value,
        type: "success",
        offset: 300,
        center: true
    });
})).catch(()=>{
    // 点击取消的操作
    this.$message({
        message: "取消输入!",
        type: "success",
        offset: 300,
        center: true
    });
})

提示框的配置内容：

16、Notification 通知

this.$notify({
    title: "标题",
    message: "这是一条通知",
    duration: 1000, // 通知默认可以自动关闭，默认时间为4500就关闭，如果设置duration为0就不会自动关闭
    type: "success",  // 指定通知的类型
    position: "top-left", // 指定通知弹出的位置，top-right、top-left、bottom-right、bottom-left，默认为top-right
    // 可以使弹出的消息距屏幕边缘偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量，根据第一个指定的位置偏移
    // 例如top-left就是一top进行偏移
    offset: 300,
    showClose: false, // 设置是否隐藏关闭按钮
})

17、NavMenu 导航菜单

? 使用el-menu创建一个导航菜单。

<!--
    el-menu 是一级菜单，
    el-submenu 创建一个存在二级菜单的菜单
    el-menu的属性：
        default-active: 当前激活菜单的 index，string
        mode:   指定菜单的模式，string（horizontal水平 / vertical垂直），默认是垂直的
        collapse：是否水平折叠菜单，boolean，默认false，仅在 mode 为 vertical 时可用
        background-color: 指定菜单的北京颜色，string
        active-text-color: 指定选中的菜单项对应的文字颜色，string
        text-color:   指定菜单的文字颜色，string
        unique-opened：  是否保持一个子菜单展开，boolean，默认false
        menu-trigger： 子菜单触发的方式，string（hover，click），只在 mode 为 horizontal 时有效)，默认hover
        router：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转，boolean，false，
        这个只是开启了路由跳转，需要在每一个菜单项中指定一个router属性，来进行跳转。
        collapse-transition：指定是否开启折叠动画，默认开启，boolean
    el-submenu的属性：
        template：自定义一个菜单的标题，可以使用i标签来指定一个图标
        show-timeout：展开菜单项的延时时间，number，默认是300
        hide-timeout：收起的延时时间，number，默认300
 -->
<!--
    el-menu的方法:
        open:展开指定的含有子菜单的菜单项，参数是菜单项的index
        close：收起指定的含有子菜单的菜单项，蚕食的菜单项的index
-->
<!--
    el-menu的事件：
        select：菜单激活时，参数是index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
        open: sub-menu 展开的回调,index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path
        close:sub-menu 收起的回调index: 打开的 sub-menu 的 index， indexPath: 打开的 sub-menu 的 index path
 -->
<router-link to="/t">点击我</router-link>
<el-radio-group v-model="isCollapse">
    <el-radio-button :label="false">展开</el-radio-button>
    <el-radio-button :label="true">折叠</el-radio-button>
</el-radio-group>
<el-menu
         background-color="#bfa"
         class="el-menu-demo"
         active-text-color="red"
         unique-opened
         :collapse="isCollapse"
         :collapse-transition="false"
         router>
    <el-menu-item
        route="/t"
        index="/t">菜单一
    </el-menu-item>
    <el-submenu
        index="2">
        <template slot="title">
            <i class="el-icon-location"></i>
            <span>菜单二</span>
        </template>
        <el-menu-item index="2-1">菜单二-1</el-menu-item>
        <el-menu-item index="2-2">菜单二-2</el-menu-item>
        <el-menu-item index="2-3">菜单二-3</el-menu-item>
        <el-submenu index="2-4">
            <template slot="title">菜单二-4</template>
            <el-menu-item index="2-4-1">菜单二-4-1</el-menu-item>
            <el-menu-item index="2-4-2">菜单二-4-2</el-menu-item>
            <el-menu-item index="2-4-3">菜单二-4-3</el-menu-item>
        </el-submenu>
    </el-submenu>
    <el-submenu index="3">
        <template slot="title">
            <i class="el-icon-location"></i>
            <span>菜单三</span>
        </template>
        <el-menu-item index="3-1">菜单三-1</el-menu-item>
        <el-menu-item index="3-2">菜单三-2</el-menu-item>
        <el-menu-item index="3-3">菜单三-3</el-menu-item>
    </el-submenu>
</el-menu>
<router-view/>

18、tabs 标签页

? 使用 el-tabs创建一个标签页。

<template>
    <!--
        el-tabs的属性：
            v-model：绑定值name对应的属性值。
            type：指定标签的类型，card卡片类型，border-card卡片优化版
            tabPosition：指定标签的位置，left|right|top|bottom
            closable：设置标签是否显示关闭按钮，boolean，默认false
            addable：设置标签是否可增加，boolean，默认false
            editable：设置标签是否可编辑，增加和删除，boolean，默认false
            stretch： 标签的宽度是否自撑开，boolean，默认false
    -->
    <!--
        el-tabs的事件：
            tab-click: 当标签被选中时，参数是选中的tab实例
            tab-remove：当移除标签时，参数是删除标签的name
            tab-add：当增加标签时
            edit：当增加或删除标签时，参数是tab实例和事件add（添加）和remove（移除）
    -->
    <el-tabs
        type="card"
        closable
        @tab-click="tabClickAction"
        @edit="editAction"
        v-model="activeName">
        <el-tab-pane
            v-for="(item,index) in items"
            :key="item.name"
            :label="item.label"
            :name="item.name">
            {{item.content}}</el-tab-pane>
    </el-tabs>
</template>

<script>
export default {
    name: "Demo01",
    data(){
        return{
            activeName: "fourth",
            items: [
                {
                    label: "用户管理",
                    name: "first",
                    content: "用户管理"
                },
                {
                    label: "配置管理",
                    name: "second",
                    content: "配置管理"
                },
                {
                    label: "商品管理",
                    name: "third",
                    content: "商品管理"
                },
                {
                    label: "销售管理",
                    name: "fourth",
                    content: "销售管理"
                }
            ]
        }
    },
    methods: {
        tabClickAction(tab,event){
            console.log(tab);
        },
        // 修改标签
        editAction(name,action){
            // 如果是移除事件
            if (action === "remove"){
                // 如果删除当前选中的标签
                if (name === this.activeName){
                    this.items.forEach((item,index)=>{
                        if (name === item.name){
                            // 找到下一个或者上一个标签
                            let next = this.items[index+1] || this.items[index-1];
                            // 切换到相邻的标签
                            if (next){
                                console.log(next);
                                this.activeName = next.name;
                            }
                        }
                    });
                }
                // 如果不是当前标签就直接冲items中删除
                this.items = this.items.filter((item)=>{
                    return item.name !== name;
                });
            }else{    // 如果添加事件

            }
        }
    }
}
</script>

19、Breadcrumb 面包屑

? 使用 el-breadcrumb，可以创建一个面包屑导航栏。

<template>
    <div>
        <!--
            el-breadcrumb的属性：
                separator:面包屑的分隔符，默认是/
                separator-class: 使用图片作为一个分隔符，这使separator失效
         -->
        <!--
            el-breadcrumb的属性：
                to: 一个对象，路由跳转对象，同 vue-router 的 to
                replace：是否在history中添加记录，boolean，默认false，默认是加记录的
        -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item
                replace
                to="/x">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
                <router-link to="/x">day02-demo01</router-link>
            </el-breadcrumb-item>
        </el-breadcrumb>
        <router-view/>
    </div>
</template>

20、PageHeader 页头

? 使用 el-page-header 标签创建一个页头。

<!--
content：页头的内容
@back：点击返回的时的回调函数，没有参数。
-->
<el-page-header
           @back="backAction"
           content="返回首页"></el-page-header>

21、Dropdown 下拉菜单

? 使用 el-dropdown创建一个下拉菜单。

<!--
    trigger: 设置下来菜单的触发方式，默认是hover，可以设置为click
    hide-on-click: 下拉菜单在点击后默认隐藏下来菜单，把这个属性设置为true点击后就不会隐藏
    @command: 事件，当选中不同的菜单项时，就指定对应的函数，参数是每一个菜单项中绑定的command值
    placement: 菜单弹出位置，string（top/top-start/top-end/bottom/bottom-start/bottom-end），默认是bottom-end
    show-timeout: 展开下拉菜单的延时（仅在 trigger 为 hover 时有效）默认250
    hide-timeout: 隐藏下拉菜单的延时（仅在 trigger 为 hover 时有效）默认250
-->
<el-dropdown
    placement="top-end"
    :hide-on-click="false"
    :show-timeout="250"
    :hide-timeout="150"
    @command="commanddAction">
  <span class="el-dropdown-link">
    下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
  </span>
    <!-- command: 设置为唯一-->
    <el-dropdown-menu
        icon="el-icon-edit"
        slot="dropdown">
        <el-dropdown-item command="a">黄金糕</el-dropdown-item>
        <el-dropdown-item command="b">双皮奶</el-dropdown-item>
        <el-dropdown-item command="c">蚵仔煎</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

<!-- 可以使用按钮来表示一个下拉菜单-->
<el-dropdown>
    <el-button type="primary">下拉菜单<i class="el-icon-arrow-down el-icon--right"></i></el-button>
    <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>黄金糕</el-dropdown-item>
        <el-dropdown-item >双皮奶</el-dropdown-item>
        <el-dropdown-item >蚵仔煎</el-dropdown-item>
    </el-dropdown-menu>
</el-dropdown>

22、Steps 步骤条

? 设置active属性，接受一个Number，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置space属性即可，它接受Number，单位为px，如果不设置，则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。

<!--
    el-steps的属性：
        active：绑定一个完成的进度，步骤1对应是0，number
        space: 指定每一个之间的间隔距离，number
        finish-status：设置这步完成时对应的类型，可以是wait / process / finish / error / success
        align-center：设置标题和描述是否居中，boolean，默认不居中
        direction：设置进度条的方向，默认是水平，string（vertical、horizontal）
        simple： 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。
        process-status: 设置当前步骤的当前状态,还没完成的状态。
        finish-status: 设置当前步骤完成后的状态
 -->
<!--
    el-step的属性：
        title：设置每一步的标题
        description：对这个步骤的描述。
        icon：用图片来代替每一个步骤
        status: 设置当前步骤的状态，不设置则根据 steps 确定状态,wait / process / finish / error / success
-->
<el-button
    @click="clickAction"
    type="primary">下一步</el-button>
<el-steps
    align-center
    :active="active"
    finish-status="success"
    :space="200">
    <el-step
        :status="finishStatus1"
        description="这是关键的第一步"
        title="步骤 1"></el-step>
    <el-step
        description="这是中间的一步"
        :status="finishStatus2"
        title="步骤 2"></el-step>
    <el-step
        description="这是最后一步"
        :status="finishStatus3"
        title="步骤 3"></el-step>
</el-steps>

<script>
export default {
    name: "Demo02",
    data(){
        return{
            active: 0,
            finishStatus1: "",
            finishStatus2: "",
            finishStatus3: "",
        }
    },
    methods: {
        backAction(){
            this.$router.push("/day06/demo02");
        },
        commandAction(value){
            console.log(value)
        },
        clickAction(){
            console.log(this.active)
            if (this.active === 2){
                this.finishStatus3 = "error";
            }
            this.active++;
        }
    }
}
</script>

23、Dialog 对话框

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

在Dialog对话框中可以嵌套自己需要的内容，例如表单，用于修改和登录等，表格用来呈现数据。如果需要在一个 Dialog 内部嵌套另一个 Dialog，需要使用 append-to-body 属性。

<!--
            el-dialog的属性：
                - title： 设置对话框的题目
                - visible： 设置这个对话框是否显示，boolean，true为显示，false为不显示，默认不显示
                - center：可以使标题和底部居中显示
                - width：设置对话框的宽度，默认是50%，string
                - fullscreen：设置对话框是否全屏，boolean，false
                - top: 设置margin-top的值，string，默认15vh
                - modal: 是否需要遮罩，boolean，true
                - lock-scroll: 出现对话框是否锁住滚动条，boolean，默认true
                - custom-class：自定义对话框的类名，进行样式设计，string
                - before-close：关闭前的回调，会暂停 Dialog 的关闭，function(done)，done 用于关闭 Dialog
        -->
        <!--
            事件：
             - open：对话框打开的回调
             - opened：对话框打开的动画结束后的回调
             - close：关闭的回调
             - closed：关闭动画结束的回调
        -->
        <el-dialog
            title="提示"
            center
            :modal="false"
            :visible.sync="dialogVisible"
            :before-close="closeAction"
            width="30%">
            <span>这是一段信息</span>
            <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
          </span>
        </el-dialog>

<!--        <el-dialog title="外层 Dialog" :visible.sync="outerVisible">-->
<!--            <el-dialog-->
<!--                width="30%"-->
<!--                title="内层 Dialog"-->
<!--                :visible.sync="innerVisible"-->
<!--                append-to-body>-->
<!--            </el-dialog>-->
<!--            <div slot="footer" class="dialog-footer">-->
<!--                <el-button @click="outerVisible = false">取 消</el-button>-->
<!--                <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>-->
<!--            </div>-->
<!--        </el-dialog>-->

24、Tooltip 文字提示

? 使用content属性来决定hover时的提示信息。由placement属性决定展示效果：placement属性值为：方向-对齐位置；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

<!--
    el-tooltip的属性：
        - content：提示的内容，string
        - placement： 展示的位置，string，top/top-start/top-end/bottom/bottom-start/bottom-end/
        left/left-start/left-end/right/right-start/right-end
        - effect：设置提示的主题，string（light、dark）
        - offset：出现位置的偏移量，number
 -->
<el-tooltip
    class="item"
    effect="dark"
    content="这是一个按钮"
    placement="top">
    <el-button>按钮</el-button>
</el-tooltip>

25、走马灯

? 结合使用el-carousel和el-carousel-item标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在el-carousel-item标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置trigger属性为click，可以达到点击触发的效果。

<!--
    el-carousel的属性：
        - height：指定高度，string
        - trigger：触发方式，默认是hover，也可以修改为click
        - indicator-position：设置显示指示器，默认在容器里面，可以设置为outside在容器外面，如果设置为none就不显示指示器
        - arrow：设置切换箭头，默认是hover在显示，可以设置为always，就会一直显示，设置为never就会一直隐藏
        - type：设置走马等的样式，可以设置为card样式。
        - direction：设置走马灯的方向，默认是horizontal水平，也可以设置为vertical垂直
        - autoplay：是否自动切换，默认true
        - interval：设置自动切换的时间，默认3000，number
 -->
<!--
    事件：
        - change：当跑马灯切换时的事件，参数目前激活的幻灯片的索引，原幻灯片的索引
-->
<el-carousel height="150px">
    <el-carousel-item
        v-for="item in 4" :key="item">
        <h3 class="small">{{ item }}</h3>
    </el-carousel-item>
</el-carousel>

g" :visible.sync=“outerVisible”>–>

## 24、Tooltip 文字提示

?	使用`content`属性来决定`hover`时的提示信息。由`placement`属性决定展示效果：`placement`属性值为：`方向-对齐位置`；四个方向：`top`、`left`、`right`、`bottom`；三种对齐位置：`start`, `end`，默认为空。如`placement="left-end"`，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

```vue
<!--
    el-tooltip的属性：
        - content：提示的内容，string
        - placement： 展示的位置，string，top/top-start/top-end/bottom/bottom-start/bottom-end/
        left/left-start/left-end/right/right-start/right-end
        - effect：设置提示的主题，string（light、dark）
        - offset：出现位置的偏移量，number
 -->
<el-tooltip
    class="item"
    effect="dark"
    content="这是一个按钮"
    placement="top">
    <el-button>按钮</el-button>
</el-tooltip>