ElementUI笔记 -- 2

目录

四. 表单组件

1. Radio单选框

2. Radio组件的事件

3. 单选框组

4. Checkbox多选框

5. Input输入框

6. 密码框

7. 文本域

8. Select选择器

9. Switch开关

10. DatePicker日期选择器

11. Upload上传

12. Form表单

五. 表格组件

1. 表格的创建

2. 美化表格

3. 多选表格

4. 加操作列

5. 自定义表头

六. 消息提示组件

1. Alert警告

2. Loading加载

3. Message消息提示

4. MessageBox弹框

5. Notification通知

七. Dialog对话框组件

1. 对话框的基本用法

2. 自定义内容

3. 嵌套的Dialog

4. 居中布局

八. 导航组件

1. NavMenu导航菜单

2. Tabs标签页

3. Breadcrumb面包屑

4. Dropdown下拉菜单

5. Steps步骤条

---

四. 表单组件

1. Radio单选框

单选框就是提供给你几个选项，你只能选择其中一个。我们在调查问卷、心理测试题等页面经常可以看到类似的单选框选项。比如，下图的调查问卷：

基础用法

在 Element UI 中提供了 <el-radio> 标签来设置单选框。

那我们来试一试吧～

新建一个 src/views/Radio.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <Radio />
  </div>
</template>

<script>
  import Radio from "./views/Radio.vue";
  export default {
    name: "App",
    components: {
      Radio,
    },
  };
</script>

<style></style>

我们在 Radio.vue 文件中写入 Radio 组件

<template>
  <div>
    <el-radio>男</el-radio>
    <el-radio>女</el-radio>
  </div>
</template>

<script></script>
<style></style>

效果显示如下：

同学们会发现，两个单选按钮默认都被选中了，并且点击按钮没有任何反应。明明是单选按钮怎么会这样呢？😫

要解开谜团，我们需要看看 <el-radio> 的相关属性，Radio 组件有如下表所示的六个属性。

在上表中，label 属性是用来决定 Radio 组件的 value 属性值，这里所说的 value 属性是指 HTML 中的 value 值，如下所示。

<input type="radio" value="male" />

ok，那我们在 Radio.vue 中添加 label 属性值吧！

<template>
  <div>
    <el-radio label="男">男</el-radio>
    <el-radio label="女">女</el-radio>
  </div>
</template>

<script></script>
<style></style>

显示效果如下：

同学们可以发现，加上 label 属性之后，单选框的两个选项均未被选中，并且当你去点其中一个按钮也不能被选中。这是为什么呢？🤔

因为呀，label 属性必须配合 v-model 指令去使用才会具有选中的效果。我们都知道 v-model 指令是 Vue.js 用来做数据双向绑定的，如果 label 的值与 v-model 的值相同，则对应的按钮为选中状态。

那我们在 Radio.vue 中去使用一下 v-model 吧。

template>
    <div>
        <el-radio v-model="radio" label="男">男</el-radio>
        <el-radio v-model="radio" label="女">女</el-radio>
    </div>
</template>

<script>
 export default {
    data () {
      return {
        radio: '男'
      };
    }
  }
</script>
<style>
</style>

现在单选框的效果就实现了～

代码说明如下：

• 首先，我们给两个 <el-radio> 标签设置 v-model 绑定变量 radio。
• 然后，使用 data(){return{radio:'男'}} 来取当前组件中 radio 为‘男’的属性值。
• 当我们组件中的值与设置的 radio 值相同，则该值就会被选中。

注意：在使用单选按钮时，label 属性和 v-model 属性是必不可少的。

禁用状态

在上面的属性表中，第三个属性是 disabled，加上该属性后，单选框处于不可选的状态。

我们来举个例子～

对 Radio.vue 文件做如下修改。

<template>
  <div>
    <el-radio disabled v-model="radio" label="男">男</el-radio>
    <el-radio disabled v-model="radio" label="女">女</el-radio>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio: "男",
      };
    },
  };
</script>
<style></style>

可以看到两个按钮已经禁用了。

带有边框的属性

上表中第四个属性 border 可以渲染带有边框的单选框。

我们来举个例子~

对 Radio.vue 文件做如下修改：

<template>
  <div>
    <el-radio v-model="radio" label="男" border>男</el-radio>
    <el-radio v-model="radio" label="女" border>女</el-radio>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio: "男",
      };
    },
  };
</script>
<style></style>

显示效果如下所示：

我们还可以添加 size 属性来设置 Radio 组件的大小，它有三个可选值（medium/small/mini）。我们对 Radio.vue 文件做如下修改：

<template>
  <div>
    <!--默认大小选项框-->
    <el-radio v-model="radio" label="阅读" border>阅读</el-radio>
    <!--中等大小选项框-->
    <el-radio v-model="radio" label="画画" border size="medium">画画</el-radio>
    <!--小型选项框-->
    <el-radio v-model="radio" label="旅游" border size="small">旅游</el-radio>
    <!--超小型选项框-->
    <el-radio v-model="radio" label="编程" border size="mini">编程</el-radio>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio: "阅读",
      };
    },
  };
</script>
<style></style>

可以看到按钮的大小改变了。

注意，只有 border 属性存在时，才可以使用 size 属性。

2. Radio组件的事件

在 Radio 组件中有一个 change 事件，是当指定值发生变化时触发的事件，也就是说如果添加了 change 事件，双向绑定中的值会随着你所选择的选项值而改变。

其使用格式如下所示：

<el-radio @change="事件处理函数"></el-radio>

注意，这里的事件处理函数一定是绑定在 Vue 上的函数。

我们来举个例子～

对 Radio.vue 文件做如下修改：

<template>
  <div>
    <el-radio v-model="radio" label="男" @change="changeGender">男</el-radio>
    <el-radio v-model="radio" label="女" @change="changeGender">女</el-radio>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio: "男",
      };
    },
    methods: {
      changeGender() {
        console.log(this.radio);
      },
    },
  };
</script>
<style></style>

可以看到控制台会打印出你当前选项的值。

代码说明：

• 我们给两个 <el-radio> 绑定了名为 changeGender 的函数。
• 通过 methods:{changeGender(){console.log(this.radio)}} 来实现 changeGender 函数，其函数内部的实现为：在控制台输出当前选项的值。

3. 单选框组

结合 el-radio-group 元素和子元素 el-radio 可以实现单选框组。只需要在 el-radio-group 中绑定 v-model，在 el-radio 中设置好 label 即可 ，无需再给每一个 el-radio 绑定变量。

el-radio-group 的意义在于：只需给 el-radio-group 添加 v-model 指令代替给内部所有 el-radio 都添加的操作。

我们来看个例子～

对 Radio.vue 文件做如下修改：

<template>
  <div>
    <p>你喜欢什么花？</p>
    <el-radio-group v-model="radio">
      <el-radio :label="1">荷花</el-radio>
      <el-radio :label="2">梅花</el-radio>
      <el-radio :label="3">牡丹</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio: 2,
      };
    },
  };
</script>
<style></style>

显示效果如下所示：

我们还可以实现按钮样式的单选组合，把 el-radio 元素换成 el-radio-button 元素即可。

我们修改一下 Radio.vue 的代码。

<template>
  <div>
    <p>你喜欢什么花？</p>
    <el-radio-group v-model="radio">
      <el-radio-button label="荷花"></el-radio-button>
      <el-radio-button label="梅花"></el-radio-button>
      <el-radio-button label="牡丹"></el-radio-button>
    </el-radio-group>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        radio: "荷花",
      };
    },
  };
</script>
<style></style>

显示效果如下：

好了，Radio 单选框就给大家讲到这里，接下来我们学习 Checkbox 多选框。

4. Checkbox多选框

多选框就是给你几个选项，你可以选择多个，比如，微博选择你自己的兴趣领域，你可以选择多个兴趣领域。

Element UI 提供了 <el-checkbox> 来实现多选框。

我们来举个例子～

新建一个 src/views/Checkbox.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <Checkbox />
  </div>
</template>

<script>
  import Checkbox from "./views/Checkbox.vue";
  export default {
    name: "App",
    components: {
      Checkbox,
    },
  };
</script>

<style></style>

在 Checkbox.vue 文件中，写入以下内容。

<template>
  <div>
    <p>你喜欢什么技术？</p>
    <el-checkbox>JavaScript</el-checkbox>
    <el-checkbox>Vue.js</el-checkbox>
    <el-checkbox>Three.js</el-checkbox>
  </div>
</template>
<script></script>
<style></style>

显示效果如下：

我们也可以使用 v-mode 属性来绑定变量 ，让选项默认为被选中的状态，修改 Checkbox.vue 文件如下：

<template>
  <div>
    <h2>购物车</h2>
    <el-checkbox label="香水" v-model="checked"></el-checkbox>
    <el-checkbox label="包包" v-model="checked"></el-checkbox>
    <el-checkbox label="狗粮" v-model="checked"></el-checkbox>
    <el-checkbox label="靴子" v-model="checked"></el-checkbox>
    <el-checkbox label="裙子" v-model="checked"></el-checkbox>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        checked: [],
      };
    },
  };
</script>
<style></style>

显示效果如下所示：

在上面代码中，我们给每个 <el-checkbox> 组件都定义了不同的 value 值，并都绑定了 v-model 属性，当你选择某个 <el-checkbox> 时，其对应的 value 值会放入 checked 数组中。

同样 Checkbox 组件也有 disabled 属性、border 属性、size 属性，这些属性的使用方法与原 DOM 标签是相同的 ，我就不再举例子了。

注意：大部分组件的使用方法相同，我们会选取一个组件详细讲解，其他用法相同的属性留给大家自己练习。为了实验文档不冗长，保证大家学到的都是浓缩精华，我们只讲不同之处。

多选框组

Element UI 提供了 el-checkbox-group 元素能把多个 Checkbox 管理为一组，只需要在 Group 中使用 v-model 绑定 Array 类型的变量，并给每个 <el-checkbox> 子元素设置 label 属性值即可。

其使用格式为：

<el-checkbox-group v-model="数组类型的变量">
  <el-checkbox label="Checkbox 对应的值"></el-checkbox>
</el-checkbox-group>

我们来举个例子～

对 Checkbox.vue 文件做如下修改：

<template>
  <div>
    <p>你最喜欢哪种动物？</p>
    <el-checkbox-group v-model="checkList">
      <el-checkbox label="猫猫"></el-checkbox>
      <el-checkbox label="兔兔"></el-checkbox>
      <el-checkbox label="狗狗"></el-checkbox>
      <el-checkbox label="猪猪"></el-checkbox>
      <el-checkbox label="其他"></el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        checkList: ["猫猫"],
      };
    },
  };
</script>
<style></style>

显示效果如下：

在上面代码中，我们给 <el-checkbox-group> 绑定了名为 checkList 的数组变量，在 checkList 数组中包含数据 “猫猫”，所以对应 label="猫猫" 的 <el-checkbox> 会被勾选。

限制勾选的数量

在 Checkbox 组件中提供了 min 和 max 属性来限制勾选的数量，min 属性用于设置最小勾选数量，max 属性用于设置最大勾选数量。

我们修改一下上面的代码，现在我们只允许最多选择两个最喜欢的动物。

<template>
  <div>
    <p>你最喜欢哪种动物？</p>
    <el-checkbox-group v-model="checkList" :min="1" :max="2">
      <el-checkbox label="猫猫"></el-checkbox>
      <el-checkbox label="兔兔"></el-checkbox>
      <el-checkbox label="狗狗"></el-checkbox>
      <el-checkbox label="猪猪"></el-checkbox>
      <el-checkbox label="其他"></el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        checkList: ["猫猫", "狗狗"],
      };
    },
  };
</script>
<style></style>

显示效果如下：

我们设置 <el-checkbox-group :min="1" :max="2">，表示最少勾选 1 个选项，最多勾选 2 个选项，当我们已经勾选两个选项后，另外三个选项处于禁用状态；当我们只有一个选项被勾选时，被勾选的那个选项处于禁用状态。

indeterminate 状态

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

那我们举个全选效果的例子，其使用步骤如下所示：

1. 在 <el-checkbox-group> 之外写一个平级的 <el-checkbox> 用于实现全选的功能，我们需要绑定一个 indeterminate 属性用来设置不确定的状态；还需要绑定一个名为 handleCheckAllChange 的事件，用于判断当前值是否选中该按钮；添加一个 v-model 属性用于判断当前选项是否全部被选中。
2. 在 <el-chackbox-group> 上绑定一个名为 handleCheckedAnimalChange 的事件，用来记录当前选项的个数。

我们对 Checkbox.vue 文件做如下修改：

<template>
  <div>
    <el-checkbox
      :indeterminate="isIndeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      >全选</el-checkbox
    >
    <div style="margin: 15px 0;"></div>
    <el-checkbox-group
      v-model="checkedAnimal"
      @change="handleCheckedAnimalChange"
    >
      <el-checkbox v-for="animal in animals" :label="animal" :key="animal"
        >{{animal}}</el-checkbox
      >
    </el-checkbox-group>
  </div>
</template>
<script>
  const animalOptions = ["猫猫", "兔兔", "狗狗", "猪猪"];
  export default {
    data() {
      return {
        checkAll: false,
        checkedAnimal: ["猫猫", "猪猪"],
        animals: animalOptions,
        isIndeterminate: true,
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedAnimal = val ? animalOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedAnimalChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.animals.length;
        this.isIndeterminate =
          checkedCount > 0 && checkedCount < this.animals.length;
      },
    },
  };
</script>
<style></style>

显示效果如下所示：

Checkbox 多选框就讲到这里，接下来我们学一下 Input 输入框。

5. Input输入框

Element UI 提供了 <el-input> 用于创建鼠标或者键盘输入字符的输入框。

我们直接举例来看看它的基本用法。

新建一个 src/views/Input.vue 文件，并对 App.vue 文件做如下修改：

<template>
  <div id="app">
    <input />
  </div>
</template>

<script>
  import Input from "./views/Input.vue";
  export default {
    name: "App",
    components: {
      Input,
    },
  };
</script>

<style></style>

我们在 App.vue 文件中创建 Input 组件，代码如下所示：

<template>
  <!--placeholder 属性用于设置输入提示语-->
  <el-input v-model="input" placeholder="请输入你的名字"></el-input>
</template>
<script>
  export default {
    data() {
      return {
        input: "李小花", // 输入框默认输入
      };
    },
  };
</script>
<style>
  .el-input {
    width: 20%; /*设置输入框的宽度，默认是屏幕宽度*/
  }
</style>

显示效果如下：

6. 密码框

Input 组件提供了 show-password 属性用于设置一个可以切换显示隐藏的密码框。

其使用格式如下：

<el-input show-password></el-input>

对 Input.vue 文件做如下修改：

<template>
  <el-input
    v-model="input"
    placeholder="请输入你的密码"
    show-password
  ></el-input>
</template>
<script>
  export default {
    data() {
      return {
        input: "123456",
      };
    },
  };
</script>
<style>
  .el-input {
    width: 20%;
  }
</style>

显示效果如下：

我们还可以给输入框中输入的字符设置输入最大和最小长度，并且加上 Icon 图标，相关属性如下表所示：

我们来举个例子～

对 Input.vue 文件做如下修改：

<template>
  <div>
    <el-input
      v-model="name"
      placeholder="请输入你的用户名"
      prefix-icon="el-icon-user"
    >
    </el-input>
    <el-input
      v-model="password"
      placeholder="请输入你的密码"
      maxlength="6"
      show-password
      prefix-icon="el-icon-key"
    >
    </el-input>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        name: "",
        password: "",
      };
    },
  };
</script>
<style>
  .el-input {
    width: 20%;
    display: block;
    margin: 10px;
  }
</style>

显示效果如下所示：

在上面代码中，我们给两个输入框设置了输入框头部图标，并给密码输入框设置最大输入长度为 6，所以当我们在密码输入框键入 6 个字符后，就无法输入了。

7. 文本域

像平时我们写文章评论，会用到文本域，Input 组件提供了 type 属性可用来指定该输入框为文本域。

使用格式如下所示：

<el-input type="textarea" :rows="文本行数"></el-input>

我们来举个例子～

对 Input.vue 文件做如下修改：

<template>
  <el-input
    type="textarea"
    :rows="5"
    placeholder="请输入你的评论"
    v-model="textarea"
  >
  </el-input>
</template>
<script>
  export default {
    data() {
      return {
        textarea: "",
      };
    },
  };
</script>
<style></style>

显示效果如下：

8. Select选择器

Select 选择器就是下拉菜单，比如很多网站的导航栏每一项就会有一个下拉菜单。比如当当网的 Header 处。

Element UI 提供了 <el-select> 和 <el-option> 来创建 Select 选择器。

我们举个例子来看看其用法吧！

新建一个 src/views/Select.vue 文件，并对 App.vue 文件做如下修改：

<template>
  <div id="app">
    <select />
  </div>
</template>

<script>
  import Select from "./views/Select.vue";
  export default {
    name: "App",
    components: {
      Select,
    },
  };
</script>

<style></style>

在 Select.vue 文件中写入以下内容。

<template>
  <el-select v-model="value" placeholder="水果分类">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          {
            value: "选项1",
            label: "苹果",
          },
          {
            value: "选项2",
            label: "橘子",
          },
          {
            value: "选项3",
            label: "西瓜",
          },
          {
            value: "选项4",
            label: "火龙果",
          },
          {
            value: "选项5",
            label: "百香果",
          },
        ],
        value: "",
      };
    },
  };
</script>
<style></style>

显示效果如下所示：

基础多选

上面我们实现了下拉菜单的单选功能，在有些时候，我们还会用到多选，用 Tag 展示已选项，比如选择自己的个性标签。

我们为 <el-select> 添加 multiple 属性即可启用多选，此时 v-model 的值为当前选中值所组成的数组。默认情况下选中值会以 Tag 的形式展现。

我们来举个例子～

对 Select.vue 文件做如下修改。

<template>
  <el-select v-model="value" placeholder="水果分类" multiple>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          {
            value: "选项1",
            label: "苹果",
          },
          {
            value: "选项2",
            label: "橘子",
          },
          {
            value: "选项3",
            label: "西瓜",
          },
          {
            value: "选项4",
            label: "火龙果",
          },
          {
            value: "选项5",
            label: "百香果",
          },
        ],
        value: "",
      };
    },
  };
</script>
<style></style>

显示效果如下：

我们还可以使用 collapse-tags 属性将它们合并为一段文字。

在上面代码中添加 collapse-tags 属性。

<template>
  <el-select v-model="value" placeholder="水果分类" multiple collapse-tags>
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    >
    </el-option>
  </el-select>
</template>
<script>
  export default {
    data() {
      return {
        options: [
          {
            value: "选项1",
            label: "苹果",
          },
          {
            value: "选项2",
            label: "橘子",
          },
          {
            value: "选项3",
            label: "西瓜",
          },
          {
            value: "选项4",
            label: "火龙果",
          },
          {
            value: "选项5",
            label: "百香果",
          },
        ],
        value: "",
      };
    },
  };
</script>
<style></style>

显示效果如下：

Select 选择器就讲到这里，接下来给大家介绍 Switch 开关。

9. Switch开关

Element UI 提供了 <el-switch> 来实现 Switch 开关，它表示两种相互对立的状态间的切换，就像灯一样，要么开，要么关。比如：很多手机设置里的都会用到。

那我们来看看 Switch 开关究竟是如何使用的。

新建一个 src/views/Switch.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <Switch1 />
  </div>
</template>

<script>
  import Switch1 from "./views/Switch.vue";

  export default {
    name: "App",
    components: {
      Switch1,
    },
  };
</script>

<style></style>

在 Switch.vue 文件中写入以下内容。

<template>
  <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
  </el-switch>
</template>
<script>
  export default {
    data() {
      return {
        value: true,
      };
    },
  };
</script>
<style></style>

显示效果如下所示：

在上面代码中，在 <el-switch> 上使用 v-mode 属性绑定了一个 Boolean 类型的变量，使用 active-color 属性和 inactive-color 属性来设置开关的背景色，开时为绿色，关时为红色。

文字描述

添加 active-text 属性和 inactive-text 属性来设置开关的文字描述。

我们在上面代码中添加文字描述相关属性。

<template>
  <el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-text="开灯"
    inactive-text="关灯"
  >
  </el-switch>
</template>
<script>
  export default {
    data() {
      return {
        value: true,
      };
    },
  };
</script>
<style></style>

显示效果如下所示：

Switch 开关就讲到这里，接下来我们学一学 DatePicker 日期选择器。

10. DatePicker日期选择器

我们在填一些电子个人信息表时，一般点击填写生日的输入框，会出现一个日历供我们选择日期，像这样的显示就可以用 DatePicker 日期选择器来实现的。

在 Element UI 中提供了 <el-date-picker> 来实现日期选择器。

我们举个例子来看看具体是怎么使用的。

新建一个 src/views/DatePicker.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <DatePicker />
  </div>
</template>

<script>
  import DatePicker from "./views/DatePicker.vue";

  export default {
    name: "App",
    components: {
      DatePicker,
    },
  };
</script>

<style></style>

接下来，我们在 DatePicker.vue 文件中使用日期选择器～

<template>
  <el-date-picker v-model="value" type="date" placeholder="选择日期">
  </el-date-picker>
</template>
<script>
  export default {
    data() {
      return {
        value: "",
      };
    },
  };
</script>
<style></style>

显示效果如下：

在上面代码中，使用 type=“date” 属性指定日期以「日」为基本单位。

除了以「日」为基本单位，我们还可以以周（type="week"）、月（type="month"）、年（demonstration）为基本单位，其使用方法同上，我就不举例了。

选择日期范围

某些时候我们在网上预定酒店，需要选择入住时间和离店时间，比如在携程上订酒店。

type 属性有个 daterange 属性值可以实现在一个选择器中选择一个时间范围。

我们来举个例子～

对 DatePicker.vue 文件做如下修改：

<template>
  <el-date-picker
    v-model="value"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
  >
  </el-date-picker>
</template>
<script>
  export default {
    data() {
      return {
        value: "",
      };
    },
  };
</script>
<style></style>

显示效果如下：

在上面代码中，使用 range-separator 属性设置日期间隔，使用 start-placeholder 属性设置开始日期，使用 end-placeholder 属性设置结束日期。

DatePicker 日期选择器就为大家介绍到这里，接下来给大家介绍 Upload 上传。

11. Upload上传

上传是我们常用的功能，比如在蓝桥云课中的基本信息里上传自己的头像。

Element UI 为我们提供了 <el-upload> 来实现上传。

需要注意的是：要实现上传功能我们必须要添加 action 属性，其属性值为上传的地址。

我们来看看上传功能是如何实现的。

新建一个 src/views/Upload.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <Upload />
  </div>
</template>

<script>
  import Upload from "./views/Upload.vue";

  export default {
    name: "App",
    components: {
      Upload,
    },
  };
</script>

<style></style>

在 Upload.vue 文件中写入以下内容。

<template>
  <el-upload action="https://jsonplaceholder.typicode.com/posts/">
    上传
  </el-upload>
</template>
<script></script>
<style></style>

可以看到我们现在已经实现了上传功能。

上传功能虽然已经实现了，但看起来过于简单，我们可以为其添加一些属性，让它看起来更接近日常生活我们见到的上传功能。关于 <el-upload> 的属性很多，这里我们只选取部分来做练习。

我们对 Upload.vue 文件做如下修改。

<template>
  <el-upload
    action="https://jsonplaceholder.typicode.com/posts/"
    accept="image/*"
    :auto-upload="false"
  >
    <el-button size="small" type="primary">选取文件</el-button>
    <div slot="tip" class="el-upload__tip">只能上传图片文件</div>
  </el-upload>
</template>
<script></script>
<style>
  .el-upload__tip {
    color: #787a91;
  }
</style>

显示效果如下所示：

代码说明如下：

• 在上面代码中，我们使用 accept 属性限制了上传文件的类型为图片类型。
• 使用 auto-upload 属性设置文件被选取后是否立即进行上传，这里设置为否。

目前我们实现了上传文件，并在页面上显示上传文件的文件名。那我们能不能让上传的图片展示在页面上呢？可以的。

我们来看代码示范例。

上传图片展示

要实现图片上传并显示到页面这个功能，有以下两个必不可少的属性需要被添加：

1. 需要有一个 on-success 属性，其属性值为当照片上传成功时调用的钩子函数，该函数用来实现照片上传功能。
2. 需要有一个 before-upload 属性，其属性值为照片上传之前执行的钩子函数，该函数用来判断上传文件的类型。

好了，我们来看看如何用代码实现吧！

我们对 Upload.vue 文件做如下修改。

<template>
  <el-upload
    class="avatar-uploader"
    action="https://jsonplaceholder.typicode.com/posts/"
    :show-file-list="false"
    :on-success="handleAvatarSuccess"
    :before-upload="beforeAvatarUpload"
  >
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</template>
<script>
  export default {
    data() {
      return {
        imageUrl: "",
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === "image/jpeg"; // 判断上传文件类型
        const isLt2M = file.size / 1024 / 1024 < 2; // 判断文件的大小
        // 若不符合要求则发出警告信息
        if (!isJPG) {
          this.$message.error("上传头像图片只能是 JPG 格式!");
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
        }
        return isJPG && isLt2M;
      },
    },
  };
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>

显示效果如下所示：

ok，Upload 上传就讲到这里，接下来我们学习 Form 表单。

12. Form表单

在前面我们学习了各种各样的表单组件（单选框、多选框等等），现在我们是时候让这些组件聚在一起了。我们平时在网上看到的页面表单肯定不会只包含一种组件，通常都是几种组件结合在一起使用。比如知乎的个人信息页面，我们可以看到表单上有输入框、日期选择器、下拉菜单等。

在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件。

其使用格式如下所示：

<el-form>
  <el-form-item>
    <!--里面放表单组件-->
  </el-form-item>
  <el-form-item>
    <!--里面放表单组件-->
  </el-form-item>
  <el-form-item>
    <!--里面放表单组件-->
  </el-form-item>
  ...
</el-form>

接下来，我们来实现一个宠物寄养申请表吧！

新建一个 src/views/Form.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <el-form ref="form" :model="form">
    <h2>欢迎加入寄养大家庭</h2>
    <!--家庭名称-->
    <el-form-item label="家庭名称">
      <el-input v-model="form.name" style="width:200px"></el-input>
    </el-form-item>
    <!--提供物品-->
    <el-form-item label="提供物品">
      <el-select
        v-model="form.article"
        placeholder="请选择提供宠物的物品"
        multiple
      >
        <el-option label="玩具" value="toy"></el-option>
        <el-option label="零食" value="snack"></el-option>
        <el-option label="饮用水" value="water"></el-option>
        <el-option label="主食" value="staple"></el-option>
      </el-select>
    </el-form-item>
    <!--寄养时间-->
    <el-form-item label="寄养时间">
      <el-date-picker
        v-model="form.date1"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>
    </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 label="小区花园" name="type"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
    <!--家庭描述-->
    <el-form-item label="家庭描述">
      <el-input
        type="textarea"
        v-model="form.desc"
        :rows="5"
        style="width:400px"
      ></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 {
    data() {
      return {
        form: {
          name: "",
          article: "",
          date1: "",
          delivery: false,
          type: [],
          desc: "",
        },
      };
    },
    methods: {
      onSubmit() {
        alert("发送成功！");
      },
    },
  };
</script>

<style></style>

显示效果如下所示：

五. 表格组件

1. 表格的创建

通常我们写后台管理系统会用表格的形式来展现数据，我们可以对数据进行排序、筛选、对比或其他自定操作。比如下图 GitHub 很火的一个后台管理系统。

大家都知道表格最基本的单元是列，而 Element- UI 中亦是如此。

在 Element UI 中，提供了 <el-table> 和 <el-table-colum> 来创建表格，其中，<el-table> 代表表格，<el-table-colum> 代表表格的一列。

其使用格式如下所示：

<el-table>
  <el-table-colum lable="列名"></el-table-colum>
  <el-table-colum lable="列名"></el-table-colum>
  <!--表格中有列，就包含几对 el-table-colum-->
</el-table>

我们来看个例子～

新建一个 src/views/Table.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <table />
  </div>
</template>

<script>
  import Table from "./views/Table.vue";

  export default {
    name: "App",
    components: {
      Table,
    },
  };
</script>

<style></style>

在 Table.vue 文件中写入以下内容。

<template>
  <el-table>
    <el-table-colum lable="姓名"></el-table-colum>
    <el-table-colum lable="电话"></el-table-colum>
    <el-table-colum lable="地址"></el-table-colum>
  </el-table>
</template>
<script></script>
<style></style>

运行之后，打开 Web 服务，可以看到页面上不是显示的一个表格，而是四个字“暂无数据”。

看到这四个字，不用我多说，原因就在于我们没有在表格里写入任何数据。那我们怎么给表格里放入数据呢？这要用到 <el-table> 中的 data 属性和 <el-table-colum> 中的 prop 属性。

data 属性用于显示数据，它的属性值为 array 数组类型。

prop 属性的官方说明是“对应列内容的字段名，也可以使用 property 属性”，通俗来讲，prop 属性相当于给列去传递一个参数，也就是把对应的数据渲染在列上。

好了，我们来看看在代码中具体是如何使用的。😉

对 Table 文件做如下修改：

<template>
  <el-table :data="tableData" style="width:30%">
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
        ],
      };
    },
  };
</script>

一个带有数据的表格就创建成功了。

在上面代码中，我们使用 prop 属性填入对应数据对象的键名，用来获取 tableDate 数组中的数据；使用 width 属性定义了表格和列的宽度。

2. 美化表格

表格会创建了，但样式很单一，我们通常看到的表格有很多样式，比如带边框、带斑马纹，带颜色条。例如下面 Microsoft PowerPoint 为我们提供的表格样式。

<el-table> 组件中有如下表所示的一些属性可以用来美化我们的表格。

我们来看看，这些属性在代码中具体是如何使用的。

对 Table.vue 文件做如下修改：

<template>
  <el-table
    :data="tableData"
    style="width:30%"
    stripe
    border
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      tableRowClassName({ row, rowIndex }) {
        console.log(row);
        console.log(rowIndex);
        // 偶数行着色
        if (rowIndex % 2 == 0) {
          return "row1";
        }
      },
    },
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
          {
            name: "小绿",
            tel: "3345697807",
            address: "杭州银河街道",
          },
          {
            name: "小红",
            tel: "123974565",
            address: "杭州梦想街道",
          },
        ],
      };
    },
  };
</script>
<style>
  .el-table .row1 {
    background: #a2d2ff;
  }
</style>

显示效果如下所示：

在上面代码中的 tableRowClassName 函数里，我们通过使用 if(rowIndex%2 == 0) 给表格中的偶数行着色了。

上面代码中，我们只是给偶数行加上了颜色，那如果我们想给奇偶行加上不同的颜色，是不是应该再写个 else 来实现？我们修改一下上面的 if 语句（为了方便阅读，这里我只给出修改部分的代码）：

<script>
  ...
  if(rowIndex%2 == 0) {
    return 'row1'
  }else {
    return 'row2'
  }
  ...
</script>
<style>
  .el-table .row1 {
    background: #a2d2ff;
  }
  .el-table .row2 {
    background: #cdf2ca;
  }
</style>

如果只做上面的修改，我们会发现奇数行并没有加上我们设置的背景色，这是因为我们在 <el-table> 中添加了 stripe 属性，它的优先级要高一些，所以我们去掉 stripe 属性就可以看到效果了。

对 Table.vue 文件做如下修改。

<template>
  <el-table
    :data="tableData"
    style="width:30%"
    border
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      tableRowClassName({ row, rowIndex }) {
        console.log(row);
        console.log(rowIndex);
        // 偶数行着色
        if (rowIndex % 2 == 0) {
          return "row1";
        } else {
          return "row2";
        }
      },
    },
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
          {
            name: "小绿",
            tel: "3345697807",
            address: "杭州银河街道",
          },
          {
            name: "小红",
            tel: "123974565",
            address: "杭州梦想街道",
          },
        ],
      };
    },
  };
</script>
<style>
  .el-table .row1 {
    background: #a2d2ff;
  }
  .el-table .row2 {
    background: #cdf2ca;
  }
</style>

现在显示效果就正常了。

表格的创建就为大家讲到这里，接下来带大家学习一下多选表格吧！

3. 多选表格

多选表格就是表格每一行的首部有个 Checkbox 多选框，可以勾选每一行的数据。

在表格中实现多选的方法很简单，手动添加一个 <el-table-column>，并且设置 type 属性的属性值为 selection 即可。

我们来试一试吧～

对 Table.vue 文件做如下修改。

<template>
  <div>
    <el-table
      :data="tableData"
      style="width:35%"
      border
      :row-class-name="tableRowClassName"
      ref="multipleTable"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
      <el-table-column prop="address" label="地址" width="180">
      </el-table-column>
    </el-table>
    <el-button @click="toggleSelection([tableData[1], tableData[2]])"
      >切换第二、第三行</el-button
    >
    <el-button @click="toggleSelection()">取消选择</el-button>
  </div>
</template>

<script>
  export default {
    methods: {
      tableRowClassName({ row, rowIndex }) {
        console.log(row);
        console.log(rowIndex);
        // 偶数行着色
        if (rowIndex % 2 == 0) {
          return "row1";
        } else {
          return "row2";
        }
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    },
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
          {
            name: "小绿",
            tel: "3345697807",
            address: "杭州银河街道",
          },
          {
            name: "小红",
            tel: "123974565",
            address: "杭州梦想街道",
          },
        ],
      };
    },
  };
</script>
<style>
  .el-table .row1 {
    background: #a2d2ff;
  }
  .el-table .row2 {
    background: #cdf2ca;
  }
</style>

显示效果如下：

在上面代码中，我们给 <el-table> 设置了 ref 属性，通过 $refs 来获取值，其中 toggleRowSelection 方法用于多选表格，切换某一行的选中状态，clearSelection 方法用于多选表格，清空用户的状态。

4. 加操作列

在管理系统中的数据表，一般会有一个操作列，可以对表中当前的数据进行编辑、删除等操作。

我们通过 <el-table-column> 去构建一个操作列，然后在操作里面通过插槽的方式放两个按钮即可。

我们对 Table.vue 文件做如下修改。

<template>
  <el-table :data="tableData" style="width:50%" border stripe>
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index,scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index,scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      // 处理编辑操作的方法
      handleEdit(index, row) {
        console.log(index, row);
        console.log("编辑已触发");
      },
      // 处理删除操作的方法
      handleDelete(index, row) {
        console.log(index, row);
        console.log("删除已触发");
      },
    },
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
          {
            name: "小绿",
            tel: "3345697807",
            address: "杭州银河街道",
          },
          {
            name: "小红",
            tel: "123974565",
            address: "杭州梦想街道",
          },
        ],
      };
    },
  };
</script>
<style></style>

在上面代码中，我们通过插槽的方式新增了两个按钮（编辑按钮和删除按钮），给编辑按钮绑定了名为 handleEdit 的方法，该方法用于处理编辑操作；给删除按钮绑定了名为 handleDelete 的方法，该方法用于处理删除操作。

5. 自定义表头

想象一下，当我们表中的数据过多时，如果我们想对某条数据进行操作，一条一条往下翻是非常麻烦的，这时我们需要在表头加一个搜索功能，通过关键字或者 id 来搜索特定数据。

在 Element UI 中，我们通过设置 slot 可以自定义表头。

我们来看看具体如何用代码实现。

对 Table.vue 文件做如下修改。

<template>
  <el-table
    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
    style="width:50%"
    border
    stripe
  >
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
    <el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
      </template>
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    methods: {
      // 处理编辑操作的方法
      handleEdit(index) {
        console.log(index);
        console.log("编辑已触发");
      },
      // 处理删除操作的方法
      handleDelete(index) {
        console.log(index);
        console.log("删除已触发");
      },
    },
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
          {
            name: "小绿",
            tel: "3345697807",
            address: "杭州银河街道",
          },
          {
            name: "小红",
            tel: "123974565",
            address: "杭州梦想街道",
          },
        ],
        search: "",
      };
    },
  };
</script>
<style></style>

显示效果如下所示：

在上面代码中，我们把 data 属性的属性值改为 tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))，其中 filter 用来返回符合指定条件的数据，在该方法中用 includes 来判断当前输入框输入的字符是否包含数据表中的数据。

ok，表格组件就为大家讲到这里。

六. 消息提示组件

1. Alert警告

有时候，页面上有些重要的交互信息，想让浏览者重点关注，我们会以弹出窗的方式将其在恰当时机展示出来，而给这些信息添加一个鲜明的背景颜色，更能让人一目了然。

在 Element UI 中，提供了 Alert 组件用于页面这些重要提示信息的展示。<el-alert> 有四种不同颜色的主题，由 type 属性来指定主题，由 title 属性来指定消息内容。

type 属性的属性值如下表所示：

我们来看看代码是如何实现的。

新建一个 src/views/Alert.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <Alert />
  </div>
</template>

<script>
  import Alert from "./views/Alert.vue";

  export default {
    name: "App",
    components: {
      Alert,
    },
  };
</script>

<style></style>

在 Alert.vue 中写入以下代码：

<template>
  <div>
    <el-alert title="信息发送成功啦～～" type="success"> </el-alert>
    <el-alert title="这是一条来自宇宙岛的消息" type="info"> </el-alert>
    <el-alert title="警告：请不要随意发送消息" type="warning"> </el-alert>
    <el-alert title="非法操作，发送失败" type="error"> </el-alert>
  </div>
</template>
<script></script>
<style>
  .el-alert {
    width: 30%;
    margin-top: 10px;
  }
</style>

显示效果如下：

Alert 组件还有很多属性，比如可以实现改变提示框背景颜色的透明度、自定义关闭按钮、添加 icon 图标、文字居中等操作。这些属性的使用方法都是相同的，我就举个综合例子带大家看看这些属性的效果。

对 Alert.vue 文件做如下修改。

<template>
  <div>
    <!--该提示不可以被关闭-->
    <el-alert
      title="信息发送成功啦～～"
      type="success"
      effect="light"
      :closable="false"
    >
    </el-alert>
    <!--关闭该提示时，发送提示消息“你要关闭我吗”-->
    <el-alert
      title="信息发送成功啦～～"
      type="success"
      effect="dark"
      close-text="你要关闭我吗"
      show-icon
    >
    </el-alert>
    <!--关闭提示时，回调 alert-->
    <el-alert
      title="这是一条来自宇宙岛的消息"
      type="info"
      @close="hello"
      show-icon
    >
    </el-alert>
    <!--文本居中-->
    <el-alert title="警告：请不要随意发送消息" type="warning" center show-icon>
    </el-alert>
    <!--带有 icon 和辅助性文字介绍-->
    <el-alert
      title="非法操作，发送失败"
      type="error"
      description="输入信息不能包含 ¥、$、@ 等字符"
      show-icon
    >
    </el-alert>
  </div>
</template>
<script>
  export default {
    methods: {
      hello() {
        alert("地球居民好!");
      },
    },
  };
</script>
<style>
  .el-alert {
    width: 30%;
    margin-top: 10px;
  }
</style>

显示效果如下所示：

代码属性说明如下：

• effect 属性用于改变主题，就是背景颜色的透明度，它有两个属性值 light 和 dark，默认值为 light。
• closable 属性用于是否允许关闭提示条，属性值为 false，表示不允许关闭。
• close-text 属性是设置关闭按钮自定义文本。
• show-icon 属性是用来设置对应 type 主题的 icon 图标。
• @close 用来绑定关闭提示时触发的事件 hello。
• center 属性用于设置文字居中显示。
• description 属性用来设置辅助性文字。

ok，Alert 组件就为大家讲到这里，接下来为大家介绍 Loading 组件。

2. Loading加载

我们浏览网页时，当数据没有加载出来，一般会在页面显示正在加载数据的动效，如下图所示。

Element 提供了两种调用 Loading 的方法：指令和服务。

实验中只给大家介绍指令的用法，如想了解服务请看官方文档。

对于自定义指令 v-loading，只需要绑定 Boolean 即可，其使用基本格式如下所示：

<template>
  <el-table v-loading="loading"> ... </el-table>
</template>
<script>
  export default {
    data() {
      return {
        loading: "true",
      };
    },
  };
</script>

我们来看例子～

新建一个 src/views/Loading.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <Loading />
  </div>
</template>

<script>
  import Loading from "./views/Loading.vue";

  export default {
    name: "App",
    components: {
      Loading,
    },
  };
</script>

<style></style>

在 Loading.vue 文件中写入以下内容。

<template>
  <el-table v-loading="loading" :data="tableData" style="width:30%">
    <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
    <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
    <el-table-column prop="address" label="地址" width="180"> </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
        ],
        loading: "true",
      };
    },
  };
</script>

显示效果如下所示：

但就这样简简单单的转圈圈，其实看不出来这个页面发生了什么事情，我们可以使用如下表所示的属性来自定义加载文案、图标和背景色，突出此状态为数据加载状态。

我们来看看效果，对 Loading.vue 文件做如下修改。

<template>
  <div>
    <el-table
      v-loading="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="#B5DEFF"
      :data="tableData"
      style="width:30%"
    >
      <el-table-column prop="name" label="姓名" width="100"> </el-table-column>
      <el-table-column prop="tel" label="电话" width="150"> </el-table-column>
      <el-table-column prop="address" label="地址" width="180">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            name: "小蓝",
            tel: "1234567899",
            address: "杭州哆啦A梦街道",
          },
          {
            name: "小白",
            tel: "3214497808",
            address: "杭州爱丽丝街道",
          },
        ],
        loading: true,
        timer: null,
      };
    },
    mounted() {
      this.timer = setTimeout(this.get, 1000);
    },
    methods: {
      get() {
        this.loading = false;
      },
    },
    beforeDestroy() {
      clearTimeout(this.timer);
    },
  };
</script>

显示效果如下所示：

ok，Loading 加载就为大家讲到这里，接下来我们学习 Message 消息提示。

3. Message消息提示

Message 消息提示 常用于主动操作后的反馈提示。

最基本的消息提示是当你进行某个操作后，出现一个消息提示，几秒之后自动消失。那我们看看如何用代码去实现吧～

新建一个 src/views/Message.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <Message />
  </div>
</template>

<script>
  import Message from "./views/Message.vue";

  export default {
    name: "App",
    components: {
      Message,
    },
  };
</script>

<style></style>

在 Message.vue 文件中写入以下内容。

<template>
  <div>
    <el-button @click="open">点击我，看一看消息提示</el-button>
    <el-button @click="openVn">VNode</el-button>
  </div>
</template>

<script>
  export default {
    methods: {
      open() {
        this.$message("喵，嘻嘻，没什么事情！");
      },
      openVn() {
        const e = this.$createElement;
        this.$message({
          message: e("div", null, [
            e("span", null, "内容可以是 "),
            e("i", { style: "color: #7FC8A9" }, "VNode"),
          ]),
        });
      },
    },
  };
</script>

显示效果如下：

在上面代码中，给两个按钮绑定了点击事件，分别调用 open 和 openVn 两个方法，最终在这两个方法中使用 this.$message 方法弹出消息框，Message 可以接收一个字符串或一个 VNode 作为参数，它会被显示为正文内容。

ok，Message 消息提示就讲到这里，接下来我们看看 MessageBox 弹框。

4. MessageBox弹框

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

• 当调用 $alert 方法即可打开普通消息提示。
• 当调用 $confirm 方法即可打开确认消息提示。
• 当调用 $prompt 方法即可打开提交内容消息提示。

这里我们用 $alert 方法举个例子吧～

新建一个 src/views/MessageBox.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <MessageBox />
  </div>
</template>

<script>
  import MessageBox from "./views/MessageBox.vue";

  export default {
    name: "App",
    components: {
      MessageBox,
    },
  };
</script>

<style></style>

在 MessageBox.vue 文件中写入以下内容。

<template>
  <el-button @click="open">点击我删除数据</el-button>
</template>
<script>
  export default {
    methods: {
      open() {
        this.$alert("您确定要删除该条数据吗？", "请注意", {
          confirmButtonText: "确定",
          callback: () => {
            this.$message({
              type: "info",
              message: `数据删除失败，请稍后再试！`,
            });
          },
        });
      },
    },
  };
</script>

显示效果如下：

在上面代码中，调用 $alert 方法打开消息提示，它接收了两个参数 message（消息内容）和 title（消息标题），在 $alert 方法中 confirmButtonText 用于设置消息确认按钮的文本内容，action 是一个回调函数。

其他两种用法与此相同，这里就不再举例了，接下来我们学习 Notification 通知。

5. Notification通知

Notification 通知 就是悬浮出现在页面角落，显示全局的通知提醒消息，比如你的微信有新消息，电脑屏幕的右侧会弹出一条消息提示。

Notification 组件提供通知功能，Element 在 Vue 实例上注册了 $notify 方法，可以直接以 this.$notify 的方式调用它。它接收一个 options 字面量参数，在最简单的情况下，只设置 title 字段和 message 字段，用于设置通知的标题和正文即可。

我们看看代码是如何实现的。

新建一个 src/views/Notification.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <Notification />
  </div>
</template>

<script>
  import Notification from "./views/Notification.vue";

  export default {
    name: "App",
    components: {
      Notification,
    },
  };
</script>

<style></style>

在 Notification.vue 文件中写入以下内容。

<template>
  <div>
    <el-button plain @click="open1"> 不会自动关闭 </el-button>
    <el-button plain @click="open2"> 会自动关闭 </el-button>
  </div>
</template>

<script>
  export default {
    methods: {
      open1() {
        const h = this.$createElement;

        this.$notify({
          title: "来猜个字谜",
          message: h(
            "i",
            { style: "color: #b3e283" },
            "一边是红，一边是绿，一边怕风，一边怕雨"
          ),
          duration: 0,
        });
      },

      open2() {
        this.$notify({
          title: "提示",
          message: "您有一条新消息",
        });
      },
    },
  };
</script>

显示效果如下：

在上面代码中，我们定义了两个按钮绑定了 open1 和 open2，两个方法之间的不同在于，open1 方法中通过设置 duration:0，这使得消息提示框不会自动关闭。

除了上面这种朴素的消息通知栏，我们还可以创建带倾向性、自定义弹出位置的通知框。

• 通过 type 字段可以设置通知类型，一共有四种，success（成功）、warning（警告）、info（信息）、error（错误）。
• 通过 position 字段可以设置弹出的位置，一共有四种，top-left（左上）、top-right（右上）、bottom-right（右下）、bottom-left（左下）。

我们来看看如何用代码实现。

对 Notification.vue 文件做如下修改。

<template>
  <div>
    <el-button plain @click="open1"> 成功 </el-button>
    <el-button plain @click="open2"> 警告 </el-button>
    <el-button plain @click="open3"> 消息 </el-button>
    <el-button plain @click="open4"> 错误 </el-button>
  </div>
</template>

<script>
  export default {
    methods: {
      open1() {
        this.$notify({
          title: "成功",
          message: "这是一条成功的提示消息",
          type: "success",
        });
      },

      open2() {
        this.$notify({
          title: "警告",
          message: "这是一条警告的提示消息",
          type: "warning",
          position: "top-left", // 左上角弹出消息
        });
      },

      open3() {
        this.$notify.info({
          title: "消息",
          message: "这是一条消息的提示消息",
          position: "bottom-left", // 左下角弹出消息
        });
      },

      open4() {
        this.$notify.error({
          title: "错误",
          message: "这是一条错误的提示消息",
          position: "bottom-right", // 右下角弹出消息
        });
      },
    },
  };
</script>

显示效果如下所示：

上面代码有一点需要大家注意一下，我们可以在不传入 type 字段的情况下直接调用，就像 open3 和 open4 中那样。

七. Dialog对话框组件

1. 对话框的基本用法

学之前，先来给大家说一说什么是对话框。

对话框就是将某些消息告知给用户，它承载了一些需要用户进行确认的消息。对话框通常在应用程序开启时呈现，来提供一些关键信息，或者要求用户做出一种选择。例如，当你下载了一个新的 App，通常首次打开会有个对话框形式的使用教程，介绍该 App 的界面功能及使用方法，你可以选择跳过或者跟着步骤操作一遍。

Element UI 给我们提供了 <el-dialog> 组件来实现对话框，在其中，我们需要设置 visible 属性，它接收 Boolean，当为 true 时显示 Dialog。

我们来看代码例子吧！

新建一个 src/views/Dialog.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <dialog />
  </div>
</template>

<script>
  import Dialog from "./views/Dialog.vue";

  export default {
    name: "App",
    components: {
      Dialog,
    },
  };
</script>

<style></style>

在 Dialog.vue 文件中写入以下内容。

<template>
  <div>
    <el-button @click="visible = true">快来点击我呀</el-button>
    <el-dialog
      title="猜一猜"
      :visible.sync="visible"
      width="30%"
      :before-close="handleClose"
    >
      <span>欢迎进入字谜游戏。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        visible: false,
      };
    },

    methods: {
      handleClose() {
        alert("不能关闭");
      },
    },
  };
</script>

显示效果如下所示：

代码说明如下：

• 在上面代码中，我们设置了 visible 属性为 false，当点击按钮时被置为 true，显示 Dialog。
• 在 <el-dialog> 中，使用 title 属性设置了对话框的标题为“猜一猜”。
• :visible.sync 中，:visible 是属性绑定，表示弹框的隐藏和显示，当 :visible 值为 true 时，表示显示弹框，反之为隐藏弹框；.sync 是表示同步的修改 visible 的值。
• before-close 是关闭前的回调函数，会暂停 Dialog 的关闭行为，这里我们的回调函数 handleClose 只是弹出一个警告框。

2. 自定义内容

除了上面这种包含标题、内容、取消和确定按钮的 Dialog 对话框外，我们还可以自定义对话框的内容，比如在对话框中嵌套一个表单。

我们来看看代码是如何实现的。

对 Dialog.vue 文件做如下修改。

<template>
  <div>
    <el-button @click="dialogFormVisible = true">点击我</el-button>
    <el-dialog
      title="个人信息登记"
      :visible.sync="dialogFormVisible"
      width="500px"
    >
      <el-form :model="form">
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.tel" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogFormVisible: false,
        form: {
          name: "",
          tel: "",
        },
        formLabelWidth: "50px",
      };
    },
  };
</script>

显示效果如下所示：

从上面的代码可以看出，把表单组件放入 Dialog 组件中，对话框的内容就变成了一个表单。

3. 嵌套的Dialog

在 Dialog 组件中有个 append-body 属性，可以实现一个 Dialog 对话框的内部嵌套一个 Dialog 对话框。

其使用格式为：

<el-dialog>
  <el-dialog append-to-body></el-dialog>
</el-dialog>

我们来看看具体是如何实现的。

对 Dialog.vue 文件做如下修改。

<template>
  <div>
    <el-button @click="outerVisible = true">点击我</el-button>
    <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>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        outerVisible: false,
        innerVisible: false,
      };
    },
  };
</script>

显示效果如下所示：

需要同学们注意一下，这里只是告诉大家 append-to-body 属性的用法，但实际应用中，不推荐大家使用嵌套的 Dialog。

4. 居中布局

在上面我们讲的例子中，Dialog 对话框中的内容都没有居中显示，我们可以使用 center 属性让标题和底部按钮居中显示。

注意：若想让内容居中显示，请使用 CSS 样式。

我们来看看代码～

对 Dialog.vue 文件做如下修改。

<template>
  <div>
    <el-button type="text" @click="centerDialogVisible = true"
      >点击打开 Dialog</el-button
    >
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible"
      width="30%"
      center
    >
      <span class="content">Hello！我是蓝桥云课的小喵喵</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false" size="small"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="centerDialogVisible = false"
          size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        centerDialogVisible: false,
      };
    },
  };
</script>
<style>
  .content {
    color: #a2d2ff;
    margin-left: 20%;
  }
</style>

显示效果如下：

在上面代码中我们给 <el-dialog> 添加了 center 属性，使得 Dialog 对话框的标题和底部按钮居中，另外给对话框内容的 <span> 标签添加了 margin 属性，使其居中显示。

需要大家注意的是：Dialog 的内容是懒渲染，也就是说在第一次被打开之前，传入的默认 slot 不会被渲染到 DOM 上。因此，若需要执行 DOM 操作，或通过 ref 获取相应组件，请在 open 事件回调中进行。

要使用 open 回调函数，我们需要在 Dialog 组件中绑定 open 事件，例如：

<template>
  <el-dialog @open="open()">
</template>
<script>
  export default {
    methods: {
      open() {

      }
    }
  };
</script>

八. 导航组件

1. NavMenu导航菜单

我们先来回忆一下，通常我们在网站上能看到哪些形式的导航。🤔

例如下图蓝桥云课的水平导航菜单。

例如下图蓝桥云课的垂直导航菜单。

在 Element UI 中提供了 <el-menu> + <el-menu-item> 来实现一个基本的垂直导航菜单。

其基本使用格式为：

<el-menu>
  <el-menu-item></el-menu-item>
  <el-menu-item></el-menu-item>
  ...
</el-menu>

我们来看个例子～

新建一个 src/views/NavMenu.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <NavMenu />
  </div>
</template>

<script>
  import NavMenu from "./views/NavMenu.vue";

  export default {
    name: "App",
    components: {
      NavMenu,
    },
  };
</script>

<style></style>

在 NavMenu.vue 文件中写入以下代码：

<template>
  <el-menu>
    <el-menu-item>全部课程</el-menu-item>
    <el-menu-item>后端开发</el-menu-item>
    <el-menu-item>前端开发</el-menu-item>
    <el-menu-item>人工智能</el-menu-item>
    <el-menu-item>信息安全</el-menu-item>
    <el-menu-item>云计算与大数据</el-menu-item>
  </el-menu>
</template>

这样我们就实现了一个最基本的垂直导航：

同学们可能会惊讶，就这？鼠标不放上去，还以为是列表呢！😫 这个导航与我们实际应用的导航开发差距太大了吧！我们通常见到的导航都有多级，而且带有一些样式，如下图携程旅行的首页：

那我们一起来优化一下吧！

对 NavMenu.vue 文件做如下修改：

<template>
  <el-menu class="el-menu-vertical-demo">
    <el-menu-item class="item1">
      <i class="el-icon-s-grid"></i>
      全部课程
    </el-menu-item>
    <el-submenu index="1">
      <template slot="title">
        <span>后端开发</span>
      </template>
      <el-menu-item-group>
        <el-menu-item>Python</el-menu-item>
        <el-menu-item>Go</el-menu-item>
        <el-menu-item>Java</el-menu-item>
        <el-menu-item>SpringBoot</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <span>前端开发</span>
      </template>
      <el-menu-item-group>
        <el-menu-item>HTML</el-menu-item>
        <el-menu-item>Vue.js</el-menu-item>
        <el-menu-item>CSS</el-menu-item>
        <el-menu-item>TypeScript</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <span>人工智能</span>
      </template>
      <el-menu-item-group>
        <el-menu-item>机器学习</el-menu-item>
        <el-menu-item>OpenCV</el-menu-item>
        <el-menu-item>TensorFlow</el-menu-item>
        <el-menu-item>NLP</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="4">
      <template slot="title">
        <span>信息安全</span>
      </template>
      <el-menu-item-group>
        <el-menu-item>网络安全</el-menu-item>
        <el-menu-item>网络开发</el-menu-item>
        <el-menu-item>渗透测试</el-menu-item>
        <el-menu-item>密码学</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="5">
      <template slot="title">
        <span>云计算与大数据</span>
      </template>
      <el-menu-item-group>
        <el-menu-item>Docker</el-menu-item>
        <el-menu-item>AWS</el-menu-item>
        <el-menu-item>OpenStack</el-menu-item>
        <el-menu-item>Hadoop</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<style>
  .el-menu-vertical-demo {
    background: #f3f0d7;
    width: 20%;
  }
  span {
    color: #bbbbbb;
  }
  .item1 {
    background: #e8e8e8;
  }
</style>

显示效果如下所示：

代码说明如下：

• 通过使用 <el-submenu> 组件可以生成二级菜单，并使用 index 属性设置了每组的唯一标志。
• 通过使用 <el-menu-item-group> 组件可以实现菜单进行分组，并通过具名 slot 设定了分组名。

那我们怎么实现水平导航呢？很简单，加一个 mode 属性就可以使导航菜单变为水平模式。

我们在 NavMenu.vue 文件添加以下代码：

<!--只给出新增部分代码-->
<template>
  <el-menu
    class="el-menu-vertical-demo"
    mode="horizontal"
    background-color="#f3f0d7"
    text-color="black"
  >
  ...
</template>
<style>
  .el-menu-vertical-demo {
    background: #f3f0d7;
    width: 20%;
  }
  span {
    color: #bbbbbb;
  }
  .item1 {
    background: #e8e8e8;
  }
</style>

显示效果如下：

在上面代码中，我们给 <el-menu> 组件添加了 mode 属性，其属性值为 horizontal 表示导航菜单水平显示；text-color 属性，用于给导航菜单的文字设置颜色，其属性值为 black 表示给导航菜单的文字颜色设置为黑色。

2. Tabs标签页

Tabs 标签页官方解释是 “分隔内容上有关联但属于不同类别的数据集合”。也就是一个标签对应一块页面的内容，比如下图所示的后台管理系统。

这么常用的功能，Element UI 当然要出对应的组件啦～

我们使用 <el-tabs> 和 <el-tab-pane> 组件就可以实现基础的标签页。

其使用格式为：

<el-tabs>
  <el-tab-pane></el-tab-pane>
  <el-tab-pane></el-tab-pane>
  ...
</el-tabs>

我们来看看具体的例子吧！

新建一个 src/views/Tabs.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <Tabs />
  </div>
</template>

<script>
  import Tabs from "./views/Tabs.vue";

  export default {
    name: "App",
    components: {
      Tabs,
    },
  };
</script>

<style></style>

在 Tabs.vue 文件中写入以下代码。

<template>
  <el-tabs v-model="activeName" type="border-card" style="width: 50%">
    <el-tab-pane label="基本信息" name="first">
      <el-input placeholder="输入你的邮箱"></el-input>
      <el-input placeholder="邮箱验证码"></el-input>
      <el-input placeholder="密码"></el-input>
      <el-input placeholder="确认密码"></el-input>
      <el-button>确认</el-button>
    </el-tab-pane>
    <el-tab-pane label="选择类型" name="second">
      <h4>请选择企业注册地，暂只支持以下国家和地区企业类型申请帐号</h4>
      <el-select v-model="value" placeholder="水果分类">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
    </el-tab-pane>
    <el-tab-pane label="信息登记" name="third">
      <el-input placeholder="订阅号"></el-input>
      <el-input placeholder="服务号"></el-input>
      <el-input placeholder="企业微信"></el-input>
    </el-tab-pane>
    <el-tab-pane label="公众号信息" name="fourth">
      <el-input placeholder="公众号名"></el-input>
      <el-input placeholder="公众号类型"></el-input>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
  export default {
    data() {
      return {
        activeName: "second",
        options: [
          {
            label: "中国大陆",
          },
          {
            label: "中国香港",
          },
        ],
      };
    },
  };
</script>
<style>
  .el-input {
    margin-bottom: 20px;
  }
</style>

显示效果如下所示：

代码说明如下：

• 在 <el-tabs> 中使用 v-model 属性绑定了标签页中的 name 属性，用于设置默认选中的标签页，这里我们设置默认选中第一个标签页。
• 在 <el-tabs> 中使用 type 属性设置标签页卡片化。
• 在 <el-tab-pane> 中使用 label 属性设置选项卡的标题，使用 name 属性与 <el-tabs v-model="activeName"> 中的 activeName 的值对应。

有同学会问了，我们日常看到的标签页不一定在顶部位置，那我们怎么调整标签页的位置呢？很简单添加 tab-position 属性就可以了，该属性有以下四个属性值。

我们对 Tabs.vue 文件做如下修改。

<template>
  <div>
    <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;">
      <el-radio-button label="top">top</el-radio-button>
      <el-radio-button label="right">right</el-radio-button>
      <el-radio-button label="bottom">bottom</el-radio-button>
      <el-radio-button label="left">left</el-radio-button>
    </el-radio-group>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tabPosition: "top",
      };
    },
  };
</script>

显示效果如下所示：

在上面代码中，我们增加了一组表单组件，用来切换 tab-position 属性为不同值时的状态，通过数据绑定的方式，来控制标签页的位置显示。

ok，Tabs 标签页的内容就为大家讲到这里，接下来为大家介绍 Breadcrumb 面包屑。

3. Breadcrumb面包屑

Breadcrumb 面包屑适用于具有层级关系的页面，通过显示当前页面的访问路径，我们可以快速访问详情页，这就像我们访问电脑上存储的文件一样，一层一层的。比如下图所示的后台管理系统。

在 Element UI 中，为我们提供了 <el-breadcrumb> 和 <el-breadcrumb-item> 组件来实现面包屑的效果。

其使用格式如下：

<el-breadcrumb>
  <el-breadcrumb-item></el-breadcrumb-item>
  <el-breadcrumb-item></el-breadcrumb-item>
  ...
</el-breadcrumb>

新建一个 src/views/Breadcrumb.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <Breadcrumb />
  </div>
</template>

<script>
  import Breadcrumb from "./views/Breadcrumb.vue";

  export default {
    name: "App",
    components: {
      Breadcrumb,
    },
  };
</script>

<style></style>

在 Breadcrumb.vue 文件中写入以下内容。

<template>
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item><a href="#">管理</a></el-breadcrumb-item>
    <el-breadcrumb-item><a href="#">列表</a></el-breadcrumb-item>
    <el-breadcrumb-item><a href="#">详情</a></el-breadcrumb-item>
  </el-breadcrumb>
</template>

显示效果如下：

在上面代码中，使用 separator-class 属性用来设置以 Icon 图标作为分隔符。我们还可以使用 separator 属性来设置字符串类型的分隔符，其默认值为斜杠 /。

4. Dropdown下拉菜单

在 Element UI 中为我们提供了 Dropdown 组件，当我们移动到下拉菜单上时，会展开菜单的具体项。

我们通过使用 <el-dropdown>、<el-dropdown-item> 和 <el-dropdown-menu> 来实现下拉菜单，它们在下拉菜单中充当什么角色呢？具体我们来看代码例子。

新建一个 src/views/Dropdown.vue 文件，并对 App.vue 文件做如下修改。

<template>
  <div id="app">
    <Dropdown />
  </div>
</template>

<script>
  import Dropdown from "./views/Dropdown.vue";

  export default {
    name: "App",
    components: {
      Dropdown,
    },
  };
</script>

<style></style>

在 Dropdown.vue 文件中写入以下内容。

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      前端方向
      <i class="el-icon-arrow-down"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item>HTML</el-dropdown-item>
      <el-dropdown-item divided>jQuery</el-dropdown-item>
      <el-dropdown-item divided>webpack</el-dropdown-item>
      <el-dropdown-item divided>CSS</el-dropdown-item>
      <el-dropdown-item divided>TypeScript</el-dropdown-item>
      <el-dropdown-item divided disabled>更多</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>
<style>
  .el-dropdown-link {
    color: #00bcd4;
  }
</style>

显示效果如下所示：

在上面代码中，使用 <el-dropdown> 标签代表当前是创建的一个下拉菜单；使用 <el-dropdown-menu> 代表下拉菜单的菜单表；使用 <el-dropdown-item> 代表菜单的每一项。

5. Steps步骤条

Steps 步骤条 用于引导用户按照流程分步骤完成任务，通常不可跳过其中一步或者颠倒步骤的顺序。比如我们注册微信公众号，需要填注册信息，其填写内容被分为 4 个标签页，每个标签对应一块页面内容。

在 Element UI 中提供了 <el-steps> 和 <el-step> 标签来实现步骤条。

其使用格式如下所示：

<el-steps>
  <el-step title="步骤名"></el-step>
  <el-step title="步骤名"></el-step>
  <el-step title="步骤名"></el-step>
  ...
</el-steps>

我们来看看具体的例子吧！

新建一个 src/views/Steps.vue 文件，并对 App.vue 文件对如下修改。

<template>
  <div id="app">
    <Steps />
  </div>
</template>

<script>
  import Steps from "./views/Steps.vue";

  export default {
    name: "App",
    components: {
      Steps,
    },
  };
</script>

<style></style>

在 Steps.vue 文件中写入代码。

<template>
  <div>
    <el-steps :active="active" finish-status="success" style="width:50%">
      <el-step title="二级部门"></el-step>
      <el-step title="一级部门"></el-step>
      <el-step title="人力资源部"></el-step>
    </el-steps>
    <el-button type="success" style="margin: 40px 20%" @click="next"
      >下一步</el-button
    >
  </div>
</template>
<script>
  export default {
    data() {
      return {
        active: 0,
      };
    },

    methods: {
      next() {
        if (this.active++ > 2) {
          alert("审批已通过！");
        }
      },
    },
  };
</script>

显示效果如下：

代码说明如下：

• 上面定义的导航条一共有三个步骤，使用 title 属性为每个步骤设置了步骤名。
• 在 <el-steps> 中使用 finish-status 属性设置了结束步骤的状态为 success 成功。
• 在 <el-steps> 中使用 active 属性设置当前激活步骤，这里我们设置 active 的值为 0，即激活步骤为第一步。
• 使用 <el-button> 定义了一个按钮，并绑定了一个点击事件，当我们点击按钮时，触发 next 方法，该方法中，使用 if 语句判断当前步骤是否大于总步骤数，如果大于则弹出警告框，否则就正常跳转到下一步进行操作。

我们还可以实现垂直的导航条，我们来看看代码。

对 Steps.vue 文件做如下修改。

<template>
  <div style="height:300px">
    <el-steps :active="active" finish-status="success" direction="vertical">
      <el-step
        title="申请"
        icon="el-icon-edit"
        description="需要提供详细的申请资料"
      ></el-step>
      <el-step
        title="批准"
        icon="el-icon-connection"
        description="需要经过三个部门的批准"
      ></el-step>
      <el-step
        title="购买"
        icon="el-icon-shopping-cart-full"
        description="需要开发票及相关单据"
      ></el-step>
    </el-steps>
    <el-button type="success" style="margin-top:30px" @click="next"
      >下一步</el-button
    >
  </div>
</template>
<script>
  export default {
    data() {
      return {
        active: 0,
      };
    },
    methods: {
      next() {
        if (this.active < 3) {
          this.active++;
        }
      },
    },
  };
</script>

显示效果如下所示：

代码说明如下：

• 在 <el-steps> 中，使用 direction 属性来设置显示方向，其属性值为 vertical 表示步骤导航条垂直显示。
• 在 <el-step> 中，使用 icon 属性给步骤条的每一步设置了 Icon 图标；使用 description 属性给每步骤添加了描述性文字。

目录

四. 表单组件

1. Radio单选框

2. Radio组件的事件

3. 单选框组

4. Checkbox多选框

5. Input输入框

6. 密码框

7. 文本域

8. Select选择器

9. Switch开关

10. DatePicker日期选择器

11. Upload上传

12. Form表单

五. 表格组件

1. 表格的创建

2. 美化表格

3. 多选表格

4. 加操作列

5. 自定义表头

六. 消息提示组件

1. Alert警告

2. Loading加载

3. Message消息提示

4. MessageBox弹框

5. Notification通知

七. Dialog对话框组件

1. 对话框的基本用法

2. 自定义内容

3. 嵌套的Dialog

4. 居中布局

八. 导航组件

1. NavMenu导航菜单

2. Tabs标签页

3. Breadcrumb面包屑

4. Dropdown下拉菜单

5. Steps步骤条

---