Eliment-ui

今天学习的 第二天内容 Eliment-ui 介绍了 组件的样式，子组件 还有布局

element-ui常用组件

表格

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

导航

分页菜单

 <el-row class="tac">
        <el-col :span="6">
            <h5>导航菜单</h5>
            <el-menu
            default-active="2"
            
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">
            
            <!--菜单项1   是一个子菜单 index指定是第几项 -->
            <el-submenu index="1">
                <!-- template、div 均可以使用 -->
                <div slot="title">
                    <!-- 前面加一个图标 -->
                    <i class="el-icon-location"></i><span>导航一</span>
                </div>
                
                <!-- 菜单项 第一组 -->
                <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>

            <!-- 菜单项2 -->
            <el-menu-item index="2">
                <i class="el-icon-menu"></i>
                <span slot="title">导航二</span>
            </el-menu-item>
            
            <!-- 菜单项3  不可点击-->
            <el-menu-item index="3" disabled>
                <i class="el-icon-document"></i>
                <span>导航三</span>
            </el-menu-item>

            <!-- 菜单项4 -->
            <el-menu-item index="4">
                <i class="el-icon-setting"></i>
                <span>导航四</span>
            </el-menu-item>
            </el-menu>
        </el-col>
    </el-row>
    
    methods:{
           ...
        
        handleOpen(value){
            console.log("打开子菜单", value)
        },

        handleClose(value){
            console.log("关闭子菜单", value)
        },
    },

下拉菜单

<!-- 下拉菜单 dropdown -->
    <el-dropdown @command="handleChange">
        <span class="el-dropdown-link">
        下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </span>

        <!-- 下拉列表 -->
        <el-dropdown-menu slot="dropdown">

            <!-- 下拉列表项 -->
            <el-dropdown-item command="1">黄金糕</el-dropdown-item>
            <el-dropdown-item command="2">狮子头</el-dropdown-item>
            <el-dropdown-item command="3">螺蛳粉</el-dropdown-item>
            <el-dropdown-item command="4" disabled>双皮奶</el-dropdown-item>
            <el-dropdown-item command="5" divided>蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>

    </el-dropdown>

<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>