[Programming Deer] Harm to learn element-ui, this is enough

Environment construction

npm install

It is recommended to use npm to install, it can better and webpack Use with packaging tools.

npm i element-ui -S

CDN

Currently available through unpkg.com/element-ui Get the latest version of the resources, import js and css files on the page to get started.

<!-- import style -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import component library -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

We recommend that users who use a CDN to introduce Element lock the version on the link address to avoid being affected by incompatible updates when Element is upgraded in the future.

Hello world

Through CDN, we can easily use Element to write a Hello world page.

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

Create layouts quickly and easily with the basic 24-column.

Basic layout

Create a basic grid layout with a single column.

Through the row and col components, and through the span attribute of the col component, we can freely combine layouts.

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

column interval

There are gaps between the columns.

The Row component provides a gutter property to specify the interval between each column, the default interval is 0.

mixed layout

The basic 1/24 column can be arbitrarily expanded and combined to form a more complex mixed layout.

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

column offset

Offsets are supported by the specified number of columns.

The number of columns offset by the column can be specified by specifying the offset property of the col component.

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

Alignment

Align the columns flexibly with flex layout.

Set the type property to 'flex' to enable flex layout, and use the justify property to specify the start, center, end, space-between, space-around values ​​to define how child elements are laid out.

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

A container component for layout, which is convenient to quickly build the basic structure of the page:

el-container: The outer container. When sub-elements contain el-header or el-footer, all sub-elements will be arranged vertically up and down, otherwise they will be arranged horizontally left and right.

el-header: The top bar container.

el-aside: The sidebar container.

el-main: The main area container.

el-footer: The bottom bar container.

The above components use flex layout, please check whether the target browser is compatible before use. In addition, the child elements of el-container can only be the latter four, and the parent elements of the latter four can only be el-container.

Case:

<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>navigation one</template>
        <el-menu-item-group>
          <template slot="title">group one</template>
          <el-menu-item index="1-1">Option 1</el-menu-item>
          <el-menu-item index="1-2">Option 2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group 2">
          <el-menu-item index="1-3">Option 3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">Option 4</template>
          <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>Navigation two</template>
        <el-menu-item-group>
          <template slot="title">group one</template>
          <el-menu-item index="2-1">Option 1</el-menu-item>
          <el-menu-item index="2-2">Option 2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group 2">
          <el-menu-item index="2-3">Option 3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">Option 4</template>
          <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>Navigation three</template>
        <el-menu-item-group>
          <template slot="title">group one</template>
          <el-menu-item index="3-1">Option 1</el-menu-item>
          <el-menu-item index="3-2">Option 2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group 2">
          <el-menu-item index="3-3">Option 3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">Option 4</template>
          <el-menu-item index="3-4-1">Option 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>Check</el-dropdown-item>
          <el-dropdown-item>new</el-dropdown-item>
          <el-dropdown-item>delete</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>Wang Xiaohu</span>
    </el-header>
    
    <el-main>
      <el-table :data="tableData">
        <el-table-column prop="date" label="date" width="140">
        </el-table-column>
        <el-table-column prop="name" label="Name" width="120">
        </el-table-column>
        <el-table-column prop="address" label="address">
        </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: 'Wang Xiaohu',
        address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
      };
      return {
        tableData: Array(20).fill(item)
      }
    }
  };
</script>

button button

Use the type, plain, round, and circle properties to style the Button.

<el-row>
  <el-button>Default button</el-button>
  <el-button type="primary">main button</el-button>
  <el-button type="success">success button</el-button>
  <el-button type="info">Information button</el-button>
  <el-button type="warning">Warning button</el-button>
  <el-button type="danger">danger button</el-button>
</el-row>

<el-row>
  <el-button plain>plain button</el-button>
  <el-button type="primary" plain>main button</el-button>
  <el-button type="success" plain>success button</el-button>
  <el-button type="info" plain>Information button</el-button>
  <el-button type="warning" plain>Warning button</el-button>
  <el-button type="danger" plain>danger button</el-button>
</el-row>

<el-row>
  <el-button round>Rounded button</el-button>
  <el-button type="primary" round>main button</el-button>
  <el-button type="success" round>success button</el-button>
  <el-button type="info" round>Information button</el-button>
  <el-button type="warning" round>Warning button</el-button>
  <el-button type="danger" round>danger button</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 form

It consists of controls such as input boxes, selectors, radio boxes, and multi-select boxes to collect, verify, and submit data

Common form elements

  1. Single box
  2. checkbox
  3. Input box
  4. drop down list box
  5. date picker
  6. file upload component

typical form

Including various form items, such as input boxes, selectors, switches, radio buttons, multi-select boxes, etc.

Inline form

Forms can be placed within a row when vertical space is limited and the form is simple.

form validation

On the premise of preventing users from making mistakes, let users find and correct mistakes as early as possible.

custom validation rules

This example shows how to use custom authentication rules to complete the secondary authentication of passwords.

Notice

  1. warning box

    Used to display important prompt information on the page.

    <template>
      <el-alert
        title="non-closeable alert"
        type="success"
        :closable="false">
      </el-alert>
      <el-alert
        title="customize close-text"
        type="info"
        close-text="Got it">
      </el-alert>
      <el-alert
        title="set callback alert"
        type="warning"
        @close="hello">
      </el-alert>
    </template>
    
    <script>
      export default {
        methods: {
          hello() {
            alert('Hello World!');
          }
        }
      }
    </script>
  2. loading box

    Displayed when data is loaded in a container such as a table.

    <template>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          prop="date"
          label="date"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="Name"
          width="180">
        </el-table-column>
        <el-table-column
          prop="address"
          label="address">
        </el-table-column>
      </el-table>
    </template>
    
    <style>
      body {
        margin: 0;
      }
    </style>
    
    <script>
      export default {
        data() {
          return {
            tableData: [{
              date: '2016-05-03',
              name: 'Wang Xiaohu',
              address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
            }, {
              date: '2016-05-02',
              name: 'Wang Xiaohu',
              address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
            }, {
              date: '2016-05-04',
              name: 'Wang Xiaohu',
              address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
            }],
            loading: true
          };
        }
      };
    </script>
  3. message box

    Appears from the top and disappears automatically after 3 seconds.

    <template>
      <el-button :plain="true" @click="open">Open the message prompt</el-button>
      <el-button :plain="true" @click="openVn">VNode</el-button>
    </template>
    
    <script>
      export default {
        methods: {
          open() {
            this.$message('This is a message');
          },
    
          openVn() {
            const h = this.$createElement;
            this.$message({
              message: h('p', null, [
                h('span', null, 'Content can be '),
                h('i', { style: 'color: teal' }, 'VNode')
              ])
            });
          }
        }
      }
    </script>
  4. pop-up

    A set of modal dialog components implemented by simulating the message prompt box of the system, used for message prompts, confirmation messages and submission content.

  5. Notice

    It hovers in the corner of the page and displays the global notification reminder message.

Table table

It is used to display multiple pieces of data with similar structure, and the data can be sorted, filtered, compared or other custom operations.

basic form

Basic table display usage.

date Name address
2016-05-02 Wang Xiaohu Lane 1518, Jinshajiang Road, Putuo District, Shanghai
2016-05-04 Wang Xiaohu Lane 1517, Jinshajiang Road, Putuo District, Shanghai
2016-05-01 Wang Xiaohu Lane 1519, Jinshajiang Road, Putuo District, Shanghai
2016-05-03 Wang Xiaohu Lane 1516, Jinshajiang Road, Putuo District, Shanghai

When the data object array is injected into the el-table element, the data can be filled in with the prop attribute in the el-table-column corresponding to the key name in the object, and the label attribute is used to define the column name of the table. Column widths can be defined using the width property.

  <template>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="date"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="Name"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="address">
      </el-table-column>
    </el-table>
  </template>

  <script>
    export default {
      data() {
        return {
          tableData: [{
            date: '2016-05-02',
            name: 'Wang Xiaohu',
            address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
          }, {
            date: '2016-05-04',
            name: 'Wang Xiaohu',
            address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
          }, {
            date: '2016-05-01',
            name: 'Wang Xiaohu',
            address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
          }, {
            date: '2016-05-03',
            name: 'Wang Xiaohu',
            address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
          }]
        }
      }
    }
  </script>

table with zebra pattern

Using a table with a zebra pattern makes it easier to distinguish data from different rows.

date Name address
2016-05-02 Wang Xiaohu Lane 1518, Jinshajiang Road, Putuo District, Shanghai
2016-05-04 Wang Xiaohu Lane 1517, Jinshajiang Road, Putuo District, Shanghai
2016-05-01 Wang Xiaohu Lane 1519, Jinshajiang Road, Putuo District, Shanghai
2016-05-03 Wang Xiaohu Lane 1516, Jinshajiang Road, Putuo District, Shanghai

The stripe attribute can create a table with zebra patterns. It accepts a Boolean, default is false, set to true to enable.

<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%">
    <el-table-column
      prop="date"
      label="date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="address">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
        }]
      }
    }
  }
</script>

table with border

date Name address
2016-05-02 Wang Xiaohu Lane 1518, Jinshajiang Road, Putuo District, Shanghai
2016-05-04 Wang Xiaohu Lane 1517, Jinshajiang Road, Putuo District, Shanghai
2016-05-01 Wang Xiaohu Lane 1519, Jinshajiang Road, Putuo District, Shanghai
2016-05-03 Wang Xiaohu Lane 1516, Jinshajiang Road, Putuo District, Shanghai

By default, the Table component does not have a vertical border, if necessary, you can use the border property, which accepts a Boolean, set to true to enable.

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="date"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="Name"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="address">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: 'Wang Xiaohu',
          address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-04',
          name: 'Wang Xiaohu',
          address: 'Lane 1517, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-01',
          name: 'Wang Xiaohu',
          address: 'Lane 1519, Jinshajiang Road, Putuo District, Shanghai'
        }, {
          date: '2016-05-03',
          name: 'Wang Xiaohu',
          address: 'Lane 1516, Jinshajiang Road, Putuo District, Shanghai'
        }]
      }
    }
  }
</script>

with status table

The table content can be highlight ed, which is convenient to distinguish "success, information, warning, danger" and other content.

Tree tree control

Present information in a clear hierarchical structure that can be expanded or collapsed.

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

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

NavMenu navigation menu

A menu that provides navigation to a website.

Sidebar

Vertical menu with embedded submenus.

The menu can be grouped through the el-menu-item-group component. The group name can be set directly through the title attribute or through the named slot.

<el-row class="tac">
  <el-col :span="12">
    <h5>default color</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>navigation one</span>
        </template>
        <el-menu-item-group>
          <template slot="title">group one</template>
          <el-menu-item index="1-1">Option 1</el-menu-item>
          <el-menu-item index="1-2">Option 2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group 2">
          <el-menu-item index="1-3">Option 3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">Option 4</template>
          <el-menu-item index="1-4-1">Option 1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">Navigation two</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">Navigation three</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">Navigation Four</span>
      </el-menu-item>
    </el-menu>
  </el-col>
  <el-col :span="12">
    <h5>custom color</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>navigation one</span>
        </template>
        <el-menu-item-group>
          <template slot="title">group one</template>
          <el-menu-item index="1-1">Option 1</el-menu-item>
          <el-menu-item index="1-2">Option 2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="Group 2">
          <el-menu-item index="1-3">Option 3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">Option 4</template>
          <el-menu-item index="1-4-1">Option 1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">Navigation two</span>
      </el-menu-item>
      <el-menu-item index="3" disabled>
        <i class="el-icon-document"></i>
        <span slot="title">Navigation three</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">Navigation Four</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 s

Used for marking and selection.

<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: 'label one', type: '' },
          { name: 'Label two', type: 'success' },
          { name: 'Label Three', type: 'info' },
          { name: 'label four', type: 'warning' },
          { name: 'Label Five', type: 'danger' }
        ]
      };
    }
  }
</script>

Comprehensive case

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>student list</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>
        <!-- head-->
        <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">Processing center</el-menu-item>
                    <el-submenu index="2">
                        <template slot="title">my workbench</template>
                        <el-menu-item index="2-1">Option 1</el-menu-item>
                        <el-menu-item index="2-2">Option 2</el-menu-item>
                        <el-menu-item index="2-3">Option 3</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="3"><a href="student list.html" target="_self">front page</a></el-menu-item>
                </el-menu>
            </el-container>
        </el-header>

        <!-- middle part -->
        <el-container style="height: 580px; border: 1px solid #eee">
            <!-- Sidebar -->
            <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>Faculty of Science and Technology</template>
                  <el-menu-item-group>
                    <el-menu-item index="1-1"><i class="el-icon-help"></i>On-campus student management</el-menu-item>
                    <el-menu-item index="1-2"><i class="el-icon-help"></i>Student upgrade/repeat</el-menu-item>
                    <el-menu-item index="1-3"><i class="el-icon-help"></i>Student Employment Situation</el-menu-item>
                  </el-menu-item-group>
                </el-submenu>
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>Consulting Department</template>
                    <el-menu-item-group>
                      <el-menu-item index="2-1"><i class="el-icon-help"></i>Intended Student Management</el-menu-item>
                      <el-menu-item index="2-2"><i class="el-icon-help"></i>Unregistered student management</el-menu-item>
                      <el-menu-item index="2-3"><i class="el-icon-help"></i>Registered Student Management</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
                  <el-submenu index="3">
                    <template slot="title"><i class="el-icon-menu"></i>Teaching and Research Department</template>
                    <el-menu-item-group>
                      <el-menu-item index="3-1"><i class="el-icon-help"></i>Management of existing courses</el-menu-item>
                      <el-menu-item index="3-2"><i class="el-icon-help"></i>developing course management</el-menu-item>
                      <el-menu-item index="3-3"><i class="el-icon-help"></i>New Technology Course Management</el-menu-item>
                    </el-menu-item-group>
                  </el-submenu>
              </el-menu>
            </el-aside>
            
            <el-container>
              <!-- main area section -->
              <el-main>
                <b style="color: red; font-size: 20px;">student list</b>
                <div style="float: right;">
                    <el-button type="primary">Add students</el-button>
                </div>
                <el-table :data="tableData">
                  <el-table-column prop="date" label="date" width="140">
                  </el-table-column>
                  <el-table-column prop="name" label="Name" width="120">
                  </el-table-column>
                  <el-table-column prop="address" label="address">
                  </el-table-column>
                  <el-table-column label="operate" width="180">
                    <el-button type="warning">edit</el-button>
                    <el-button type="danger">delete</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:"Zhang San",
                    address:"Changping district, Beijing"
                },{
                    date:"2088-08-08",
                    name:"Li Si",
                    address:"Changping district, Beijing"
                },{
                    date:"2088-08-08",
                    name:"Wang Wu",
                    address:"Changping district, Beijing"
                },{
                    date:"2088-08-08",
                    name:"Zhao Liu",
                    address:"Changping district, Beijing"
                }
            ]
        }
    });
</script>
</html>

❤️ Handsome you came to see me again

If you find this content helpful:

  1. Like and support it, so that more people can see this content
  2. You are welcome to share your thoughts with me in the comment area, and you are also welcome to record your thinking process in the comment area.

Tags: Front-end Vue.js Element-ui

Posted by sdlyr8 on Fri, 06 May 2022 10:52:40 +0300