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"来自定义样式

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

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

    
        
            
            导航一
        
        
            分组一
            选项1
            选项2
        
        
            选项3
        
    
    
        
        导航二
    

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

只需要将

    分组一
    选项1
    选项2

改为
    选项1
    选项2
    即可，去掉分组一这个标题

NavMenu 导航菜单参数说明：

1、collapse：菜单是否折叠隐藏起来(只显示图标)，可以通过事件，取反这个值，从而实现折叠与展开
2、unique-opened：菜单子项，每次只展开一个子菜单
3、default-active：当前激活菜单的 index
4、router：激活 vue-router 模式，使用index作为path进行路由跳转(默认是使用to进行路由导向)

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

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

    
        
        {{item.name}}
    

直接写:index="index+"  ，会报错误，需要绑定的属性值是string类型，现在是number类型，解决办法：使用隐式类型转换，即" index+'' "   即可将index转换为string类型
六、侧边导航，有的是有下拉列表的，有的是没有的，所以需要在定义路由的时候，指明哪些是没有下拉列表的，这里使用oneLeaf:true，表示该路由是没有下拉列表的，循环的时候根据这个属性进行判断，这里是遍历：
和，需要在最外面套一个template标签进行循环，

    

        
            
            {{item.name}}
        
        {{list.name}}
    
    
            
            {{item.children[0].name}}
    

七、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)，将当前行的用户数据，直接拷贝到打开的编辑界面上，有一个问题，只有姓名、年龄和地址传过去了，性别和生日日期没有，这里需要做下修改：

    男
    女

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

    我的消息
    设置
    退出登录

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

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