Element-UI如何使用-创新互联
这篇文章将为大家详细讲解有关Element-UI如何使用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
成都创新互联-专业网站定制、快速模板网站建设、高性价比西陵网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式西陵网站制作公司更省心,省钱,快速模板网站建设找我们,业务覆盖西陵地区。费用合理售后完善,十多年实体公司更值得信赖。一、安装好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页面上,需要显示的地方,使用
五、index绑定的值的类型必须是string类型,不能是number类型,和key的绑定不一样
{{item.name}}
直接写:index="index+" ,会报错误,需要绑定的属性值是string类型,现在是number类型,解决办法:使用隐式类型转换,即" index+'' " 即可将index转换为string类型
六、侧边导航,有的是有下拉列表的,有的是没有的,所以需要在定义路由的时候,指明哪些是没有下拉列表的,这里使用oneLeaf:true,表示该路由是没有下拉列表的,循环的时候根据这个属性进行判断,这里是遍历:
{{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如何使用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站栏目:Element-UI如何使用-创新互联
当前链接:http://scyanting.com/article/psepo.html