Element-UI如何使用

这篇文章将为大家详细讲解有关Element-UI如何使用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

一、安装好vue-cli脚手架之后
1、安装Element-UI：
npm i element-ui -S
2、项目中 main.js 文件中引用
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
3、注册使用：
Vue.use(ElementUI)

二、使用Element-UI
1、最外层页面整体框架，使用el-row el-col，进行栅格化处理，即Layout 布局
不使用Container 布局容器，自己使用class="container"  class="header"  class="main"来自定义样式

<template>

    <el-row class="container">
        <el-col :span="24" class="header">
            <el-col :span="10" class="logo"></el-col>
            <el-col :span="14" class="userinfo"></el-col>
        </el-col>
        <el-col :span="24" class="header">

        </el-col>
    </el-row>

</template>

这些是外部的布局容器，定义内部的小组件时，可以使用Element-UI提供的组件，比如NavMenu 导航菜单等等

三、侧边栏导航菜单的使用

<el-menu default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">
    <el-submenu index="1">
        <template slot="title">
            <i class="el-icon-location"></i>
            <span slot="title">导航一</span>
        </template>
        <el-menu-item-group>
            <span slot="title">分组一</span>
            <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>
    <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">导航二</span>
    </el-menu-item>
</el-menu>

这样子即可生成一个侧边导航，但是，每个导航会有一个标题，很丑

只需要将
<el-menu-item-group>
    <span slot="title">分组一</span>
    <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 index="1-1">选项1</el-menu-item>
    <el-menu-item index="1-2">选项2</el-menu-item>
    即可，去掉分组一这个标题

NavMenu 导航菜单参数说明：
<el-menu unique-opened router default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse"></el-menu>
1、collapse：菜单是否折叠隐藏起来(只显示图标)，可以通过事件，取反这个值，从而实现折叠与展开
2、unique-opened：菜单子项，每次只展开一个子菜单
3、default-active：当前激活菜单的 index
4、router：激活 vue-router 模式，使用index作为path进行路由跳转(默认是使用to进行路由导向)

四、对于Table路由，是home页面的子路由，所以在children里面定义这个Table路由，然后在home页面上，需要显示的地方，使用<router-view></router-view>来显示Table路由的内容，这里是在mian里面定义的，然后显示子路由内容

五、index绑定的值的类型必须是string类型，不能是number类型，和key的绑定不一样

<el-submenu :index="index+''" v-for="item,index in $router.options.routes">
    <template slot="title">
        <i class="el-icon-location"></i>
        <span slot="title">{{item.name}}</span>
    </template>
</el-submenu>

直接写:index="index+"  ，会报错误，需要绑定的属性值是string类型，现在是number类型，解决办法：使用隐式类型转换，即" index+'' "   即可将index转换为string类型
六、侧边导航，有的是有下拉列表的，有的是没有的，所以需要在定义路由的时候，指明哪些是没有下拉列表的，这里使用oneLeaf:true，表示该路由是没有下拉列表的，循环的时候根据这个属性进行判断，这里是遍历：
<el-submenu>和<el-menu-item>，需要在最外面套一个template标签进行循环，
<template  v-for="item,index in $router.options.routes"></template>
<el-menu unique-opened router default-active="1-4-1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" :collapse="isCollapse">

<template  v-for="item,index in $router.options.routes">
    <el-submenu :index="index+''" v-if="!item.oneLeaf">

        <template slot="title">
            <i :class="item.icon"></i>
            <span slot="title">{{item.name}}</span>
        </template>
        <el-menu-item :key="index" v-for="list,index in item.children" :index="'/'+list.path">{{list.name}}</el-menu-item>
    </el-submenu>
    <el-menu-item :index="'/'+item.children[0].path" v-if="item.oneLeaf">
            <i :class="item.icon"></i>
            <span slot="title">{{item.children[0].name}}</span>
    </el-menu-item>
</template>

</el-menu>

七、Table 表格
用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

<el-table :data="users" highlight-current-row v-loading="listLoading" @selection-change="selsChange" >
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column type="index" width="60">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120" sortable>
</el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex" sortable>
</el-table-column>
<el-table-column label="操作" width="150">
    <template scope="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
    </template>
    <el-pagination
          background
          layout="prev, pager, next"
          :total="totalPage"
          :pageSize="pageSize"
          :currentPage="currentPage"
          >
        </el-pagination>
</el-table-column>
</el-table>

1、data：在表格中显示的数据，array类型
2、sortable：以设置了该属性的列为基准进行排序
3、formatter：用于格式化指定列的值，接受一个Function，会传入两个参数：row和column，可以根据自己的需求进行处理。
4、page-size：每页显示条目个数，支持 .sync 修饰符
5、total：总条目数
6、current-page：当前页数，支持 .sync 修饰符
八、表格分页
在data里面设置total、page-size、current-page等属性，然后绑定在el-pagination组件上，然后通过这些属性来过滤或筛选总数据tableData3，即可实现分页
首页是给el-table部分绑定数据：如图

js部分的变动：


九、
增加用户接口：通过参数传入新增的用户数据，push到模拟的用户数据的数组里，然后返回一个200给前台，新增成功
删除用户接口：通过前台传入的用户id，在接口处，筛选出不等于这个id的所有数据，然后返回给前台，即表示删除了这个id对应的用户数据，通过filter方法
编辑用户数据接口：通过前台传入的id参数，利用some方法，筛选出对应的用户数据，然后更改这个用户数据，将所有的值更改为前台传入的参数
编辑用户界面和增加用户界面是一样的，通过this.editform = Object.assign({},row)，将当前行的用户数据，直接拷贝到打开的编辑界面上，有一个问题，只有姓名、年龄和地址传过去了，性别和生日日期没有，这里需要做下修改：

<el-radio-group v-model="editform.sex">
    <el-radio :label="1">男</el-radio>
    <el-radio :label="0">女</el-radio>
</el-radio-group>

label需要动态绑定
登录接口：
在login.vue里面，直接axios.post('/login').then()，会报错误：Cannot read property 'then' of undefined
原因是mock.js里面的登录接口，没有返回promise对象
另外，mock.js里面，接口参数config获取到的前端数据类型是字符串，需要转为json格式，使用JSON.parse()进行转换
十、.native修饰符
在做登出操作的时候，给退出登录按钮添加click事件，发现没有效果

<el-dropdown-menu slot="dropdown">
    <el-dropdown-item>我的消息</el-dropdown-item>
    <el-dropdown-item>设置</el-dropdown-item>
    <el-dropdown-item divided @click="loginOut">退出登录</el-dropdown-item>
</el-dropdown-menu>

后来，在click后面加是.native才成功了
.native - 监听组件根元素的原生事件。
主要是给自定义的组件添加原生事件。

关于“Element-UI如何使用”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。