乐趣区

关于前端:编程鹿害-学elementui-看这篇就够了

jiezi

环境搭建

npm 装置

举荐应用 npm 的形式装置，它能更好地和 webpack 打包工具配合应用。

npm i element-ui -S

CDN

目前能够通过 unpkg.com/element-ui 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始应用。

<!-- 引入款式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

咱们倡议应用 CDN 引入 Element 的用户在链接地址上锁定版本，免得未来 Element 降级时受到非兼容性更新的影响。

Hello world

通过 CDN 的形式咱们能够很容易地应用 Element 写出一个 Hello world 页面。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
    <el-button @click="visible = true">Button</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
      <p>Try Element</p>
    </el-dialog>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {return { visible: false}
      }
    })
  </script>
</html>

Layout 布局

通过根底的 24 分栏，迅速简便地创立布局。

根底布局

应用繁多分栏创立根底的栅格布局。

通过 row 和 col 组件，并通过 col 组件的 span 属性咱们就能够自在地组合布局。

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {margin-bottom: 0;}
  }
  .el-col {border-radius: 4px;}
  .bg-purple-dark {background: #99a9bf;}
  .bg-purple {background: #d3dce6;}
  .bg-purple-light {background: #e5e9f2;}
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

分栏距离

分栏之间存在距离。

Row 组件 提供 gutter 属性来指定每一栏之间的距离，默认距离为 0。

混合布局

通过根底的 1/24 分栏任意扩大组合造成较为简单的混合布局。

<el-row :gutter="20">
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {margin-bottom: 0;}
  }
  .el-col {border-radius: 4px;}
  .bg-purple-dark {background: #99a9bf;}
  .bg-purple {background: #d3dce6;}
  .bg-purple-light {background: #e5e9f2;}
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

分栏偏移

反对偏移指定的栏数。

通过制订 col 组件的 offset 属性能够指定分栏偏移的栏数。

<el-row :gutter="20">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {margin-bottom: 0;}
  }
  .el-col {border-radius: 4px;}
  .bg-purple-dark {background: #99a9bf;}
  .bg-purple {background: #d3dce6;}
  .bg-purple-light {background: #e5e9f2;}
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

对齐形式

通过 flex 布局来对分栏进行灵便的对齐。

将 type 属性赋值为 ‘flex’，能够启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版形式。

<el-row type="flex" class="row-bg">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="end">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around">
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {margin-bottom: 0;}
  }
  .el-col {border-radius: 4px;}
  .bg-purple-dark {background: #99a9bf;}
  .bg-purple {background: #d3dce6;}
  .bg-purple-light {background: #e5e9f2;}
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

Container 布局容器

用于布局的容器组件，不便疾速搭建页面的根本构造：

el-container：外层容器。当子元素中蕴含 el-header 或者 el-footer 时，全副子元素会垂直高低排列，否则会程度左右排列。

el-header：顶栏容器。

el-aside：侧边栏容器。

el-main：次要区域容器。

el-footer：底栏容器。

以上组件采纳了 flex 布局，应用前请确定指标浏览器是否兼容。此外，el-container 的子元素只能是后四者，后四者的父元素也只能是 el-container。

案例：

<el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1','3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i> 导航一 </template>
        <el-menu-item-group>
          <template slot="title"> 分组一 </template>
          <el-menu-item index="1-1"> 选项 1 </el-menu-item>
          <el-menu-item index="1-2"> 选项 2 </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组 2">
          <el-menu-item index="1-3"> 选项 3 </el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title"> 选项 4 </template>
          <el-menu-item index="1-4-1"> 选项 4 -1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i> 导航二 </template>
        <el-menu-item-group>
          <template slot="title"> 分组一 </template>
          <el-menu-item index="2-1"> 选项 1 </el-menu-item>
          <el-menu-item index="2-2"> 选项 2 </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组 2">
          <el-menu-item index="2-3"> 选项 3 </el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title"> 选项 4 </template>
          <el-menu-item index="2-4-1"> 选项 4 -1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i> 导航三 </template>
        <el-menu-item-group>
          <template slot="title"> 分组一 </template>
          <el-menu-item index="3-1"> 选项 1 </el-menu-item>
          <el-menu-item index="3-2"> 选项 2 </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组 2">
          <el-menu-item index="3-3"> 选项 3 </el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title"> 选项 4 </template>
          <el-menu-item index="3-4-1"> 选项 4 -1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>
  
  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <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>
      <span> 王小虎 </span>
    </el-header>
    
    <el-main>
      <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</el-container>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {color: #333;}
</style>

<script>
  export default {data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {tableData: Array(20).fill(item)
      }
    }
  };
</script>

button 按钮

应用 type、plain、round 和circle属性来定义 Button 的款式。

<el-row>
  <el-button> 默认按钮 </el-button>
  <el-button type="primary"> 次要按钮 </el-button>
  <el-button type="success"> 胜利按钮 </el-button>
  <el-button type="info"> 信息按钮 </el-button>
  <el-button type="warning"> 正告按钮 </el-button>
  <el-button type="danger"> 危险按钮 </el-button>
</el-row>

<el-row>
  <el-button plain> 奢侈按钮 </el-button>
  <el-button type="primary" plain> 次要按钮 </el-button>
  <el-button type="success" plain> 胜利按钮 </el-button>
  <el-button type="info" plain> 信息按钮 </el-button>
  <el-button type="warning" plain> 正告按钮 </el-button>
  <el-button type="danger" plain> 危险按钮 </el-button>
</el-row>

<el-row>
  <el-button round> 圆角按钮 </el-button>
  <el-button type="primary" round> 次要按钮 </el-button>
  <el-button type="success" round> 胜利按钮 </el-button>
  <el-button type="info" round> 信息按钮 </el-button>
  <el-button type="warning" round> 正告按钮 </el-button>
  <el-button type="danger" round> 危险按钮 </el-button>
</el-row>

<el-row>
  <el-button icon="el-icon-search" circle></el-button>
  <el-button type="primary" icon="el-icon-edit" circle></el-button>
  <el-button type="success" icon="el-icon-check" circle></el-button>
  <el-button type="info" icon="el-icon-message" circle></el-button>
  <el-button type="warning" icon="el-icon-star-off" circle></el-button>
  <el-button type="danger" icon="el-icon-delete" circle></el-button>
</el-row>

Form 表单

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

常见的表单元素

  1. 单选框
  2. 复选框
  3. 输入框
  4. 下拉列表框
  5. 日期选择器
  6. 文件上传组件

典型表单

包含各种表单项，比方输入框、选择器、开关、单选框、多选框等。

行内表单

当垂直方向空间受限且表单较简略时，能够在一行内搁置表单。

表单验证

在避免用户犯错的前提下，尽可能让用户更早地发现并纠正错误。

自定义校验规定

这个例子中展现了如何应用自定义验证规定来实现明码的二次验证。

告诉

  1. 正告框

    用于页面中展现重要的提示信息。

    <template>
  <el-alert
    title="不可敞开的 alert"
    type="success"
    :closable="false">
  </el-alert>
  <el-alert
    title="自定义 close-text"
    type="info"
    close-text="晓得了">
  </el-alert>
  <el-alert
    title="设置了回调的 alert"
    type="warning"
    @close="hello">
  </el-alert>
</template>

<script>
  export default {
    methods: {hello() {alert('Hello World!');
      }
    }
  }
</script>

  2. 加载框

    在表格等容器中加载数据时显示.

    <template>
  <el-table
    v-loading="loading"
    :data="tableData"
    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>
</template>

<style>
  body {margin: 0;}
</style>

<script>
  export default {data() {
      return {
        tableData: [{
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        loading: true
      };
    }
  };
</script>

  3. 音讯提示框

    从顶部呈现，3 秒后主动隐没。

    <template>
  <el-button :plain="true" @click="open"> 关上音讯提醒 </el-button>
  <el-button :plain="true" @click="openVn">VNode</el-button>
</template>

<script>
  export default {
    methods: {open() {this.$message('这是一条音讯提醒');
      },

      openVn() {
        const h = this.$createElement;
        this.$message({
          message: h('p', null, [h('span', null, '内容能够是'),
            h('i', { style: 'color: teal'}, 'VNode')
          ])
        });
      }
    }
  }
</script>
  4. 弹框

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

  5. 告诉

    悬浮呈现在页面角落，显示全局的告诉揭示音讯。

Table 表格

用于展现多条构造相似的数据，可对数据进行排序、筛选、比照或其余自定义操作。

根底表格

根底的表格展现用法。

日期 姓名 地址
2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄
2016-05-04 王小虎 上海市普陀区金沙江路 1517 弄
2016-05-01 王小虎 上海市普陀区金沙江路 1519 弄
2016-05-03 王小虎 上海市普陀区金沙江路 1516 弄

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

  <template>
    <el-table
      :data="tableData"
      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>
  </template>

  <script>
    export default {data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
        }
      }
    }
  </script>

带斑马纹表格

应用带斑马纹的表格，能够更容易辨别出不同行的数据。

日期 姓名 地址
2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄
2016-05-04 王小虎 上海市普陀区金沙江路 1517 弄
2016-05-01 王小虎 上海市普陀区金沙江路 1519 弄
2016-05-03 王小虎 上海市普陀区金沙江路 1516 弄

stripe属性能够创立带斑马纹的表格。它承受一个 Boolean，默认为false，设置为true 即为启用。

<template>
  <el-table
    :data="tableData"
    stripe
    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>
</template>

<script>
  export default {data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

带边框表格

日期 姓名 地址
2016-05-02 王小虎 上海市普陀区金沙江路 1518 弄
2016-05-04 王小虎 上海市普陀区金沙江路 1517 弄
2016-05-01 王小虎 上海市普陀区金沙江路 1519 弄
2016-05-03 王小虎 上海市普陀区金沙江路 1516 弄

默认状况下，Table 组件是不具备竖直方向的边框的，如果须要，能够应用 border 属性，它承受一个 Boolean，设置为true 即可启用。

<template>
  <el-table
    :data="tableData"
    border
    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>
</template>

<script>
  export default {data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

带状态表格

可将表格内容 highlight 显示，不便辨别「胜利、信息、正告、危险」等内容。

Tree 树形控件

用清晰的层级构造展现信息，可开展或折叠。

<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>

<script>
  export default {data() {
      return {
        data: [{
          label: '一级 1',
          children: [{
            label: '二级 1-1',
            children: [{label: '三级 1-1-1'}]
          }]
        }, {
          label: '一级 2',
          children: [{
            label: '二级 2-1',
            children: [{label: '三级 2-1-1'}]
          }, {
            label: '二级 2-2',
            children: [{label: '三级 2-2-1'}]
          }]
        }, {
          label: '一级 3',
          children: [{
            label: '二级 3-1',
            children: [{label: '三级 3-1-1'}]
          }, {
            label: '二级 3-2',
            children: [{label: '三级 3-2-1'}]
          }]
        }],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    },
    methods: {handleNodeClick(data) {console.log(data);
      }
    }
  };
</script>

NavMenu 导航菜单

为网站提供导航性能的菜单。

侧栏

垂直菜单，可内嵌子菜单。

通过 el-menu-item-group 组件能够实现菜单进行分组，分组名能够通过 title 属性间接设定，也能够通过具名 slot 来设定。

<el-row class="tac">
  <el-col :span="12">
    <h5> 默认色彩 </h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span> 导航一 </span>
        </template>
        <el-menu-item-group>
          <template slot="title"> 分组一 </template>
          <el-menu-item index="1-1"> 选项 1 </el-menu-item>
          <el-menu-item index="1-2"> 选项 2 </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组 2">
          <el-menu-item index="1-3"> 选项 3 </el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title"> 选项 4 </template>
          <el-menu-item index="1-4-1"> 选项 1 </el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title"> 导航二 </span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title"> 导航三 </span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title"> 导航四 </span>
      </el-menu-item>
    </el-menu>
  </el-col>
  <el-col :span="12">
    <h5> 自定义色彩 </h5>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span> 导航一 </span>
        </template>
        <el-menu-item-group>
          <template slot="title"> 分组一 </template>
          <el-menu-item index="1-1"> 选项 1 </el-menu-item>
          <el-menu-item index="1-2"> 选项 2 </el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组 2">
          <el-menu-item index="1-3"> 选项 3 </el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title"> 选项 4 </template>
          <el-menu-item index="1-4-1"> 选项 1 </el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title"> 导航二 </span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title"> 导航三 </span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title"> 导航四 </span>
      </el-menu-item>
    </el-menu>
  </el-col>
</el-row>

<script>
  export default {
    methods: {handleOpen(key, keyPath) {console.log(key, keyPath);
      },
      handleClose(key, keyPath) {console.log(key, keyPath);
      }
    }
  }
</script>

Tag 标签

用于标记和抉择。

<el-tag
  v-for="tag in tags"
  :key="tag.name"
  closable
  :type="tag.type">
  {{tag.name}}
</el-tag>

<script>
  export default {data() {
      return {
        tags: [{ name: '标签一', type: ''},
          {name: '标签二', type: 'success'},
          {name: '标签三', type: 'info'},
          {name: '标签四', type: 'warning'},
          {name: '标签五', type: 'danger'}
        ]
      };
    }
  }
</script>

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 学生列表 </title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-header{background-color: #545c64;}
        .header-img{
            width: 100px;
            margin-top:20px;
        }
    </style>
</head>
<body>
<div id="div">
    <el-container>
        <!-- 头部 -->
        <el-header class="el-header">
            <el-container>
                <div>
                    <el-image src="img/export.png" class="header-img"></el-image>
                </div>
                <el-menu
                    :default-active="activeIndex2"
                    mode="horizontal"
                    @select="handleSelect"
                    background-color="#545c64"
                    text-color="white"
                    active-text-color="#ffd04b"
                    style="margin-left: auto;">
                    <el-menu-item index="1"> 解决核心 </el-menu-item>
                    <el-submenu index="2">
                        <template slot="title"> 我的工作台 </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>
                    <el-menu-item index="3"><a href="学生列表.html" target="_self"> 首页 </a></el-menu-item>
                </el-menu>
            </el-container>
        </el-header>

        <!-- 两头局部 -->
        <el-container style="height: 580px; border: 1px solid #eee">
            <!-- 侧边栏 -->
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
              <el-menu :default-openeds="['1']">
                <el-submenu index="1">
                  <template slot="title"><i class="el-icon-menu"></i> 学工部 </template>
                  <el-menu-item-group>
                    <el-menu-item index="1-1"><i class="el-icon-help"></i> 在校学生治理 </el-menu-item>
                    <el-menu-item index="1-2"><i class="el-icon-help"></i> 学生降级 / 留级 </el-menu-item>
                    <el-menu-item index="1-3"><i class="el-icon-help"></i> 学生待业状况 </el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i> 咨询部 </template>
                    <el-menu-item-group>
                      <el-menu-item index="2-1"><i class="el-icon-help"></i> 动向学生治理 </el-menu-item>
                      <el-menu-item index="2-2"><i class="el-icon-help"></i> 未报名学生治理 </el-menu-item>
                      <el-menu-item index="2-3"><i class="el-icon-help"></i> 已报名学生治理 </el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="3">
                    <template slot="title"><i class="el-icon-menu"></i> 教研部 </template>
                    <el-menu-item-group>
                      <el-menu-item index="3-1"><i class="el-icon-help"></i> 已有课程管理 </el-menu-item>
                      <el-menu-item index="3-2"><i class="el-icon-help"></i> 正在研发课程管理 </el-menu-item>
                      <el-menu-item index="3-3"><i class="el-icon-help"></i> 新技术课程管理 </el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
              </el-menu>
            </el-aside>
            
            <el-container>
              <!-- 主区域局部 -->
              <el-main>
                <b style="color: red; font-size: 20px;"> 学生列表 </b>
                <div style="float: right;">
                    <el-button type="primary"> 增加学生 </el-button>
                </div>
                <el-table :data="tableData">
                  <el-table-column prop="date" label="日期" width="140">
                  </el-table-column>
                  <el-table-column prop="name" label="姓名" width="120">
                  </el-table-column>
                  <el-table-column prop="address" label="地址">
                  </el-table-column>
                  <el-table-column label="操作" width="180">
                    <el-button type="warning"> 编辑 </el-button>
                    <el-button type="danger"> 删除 </el-button>
                  </el-table-column>
                </el-table>
              </el-main>
            </el-container>
          </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            tableData:[
                {
                    date:"2088-08-08",
                    name:"张三",
                    address:"北京市昌平区"
                },{
                    date:"2088-08-08",
                    name:"李四",
                    address:"北京市昌平区"
                },{
                    date:"2088-08-08",
                    name:"王五",
                    address:"北京市昌平区"
                },{
                    date:"2088-08-08",
                    name:"赵六",
                    address:"北京市昌平区"
                }
            ]
        }
    });
</script>
</html>

❤️ 帅气的你又来看了我

如果你感觉这篇内容对你挺有有帮忙的话：

  1. 点赞反对下吧，让更多的人也能看到这篇内容（珍藏不点赞，都是耍流氓 -_-）
  2. 欢送在留言区与我分享你的想法，也欢送你在留言区记录你的思考过程。
退出移动版