iview使用经验
风雪夜照无眠
一只小小前端
展开
-
iview中步骤条的使用
iview中步骤条的使用<template> <Content> <!-- 标题区 --> <span class="function-title">代理商开户</span> <div v-if="success===1"> <div class="empty-form">...原创 2019-11-07 21:44:05 · 3468 阅读 · 0 评论 -
iview中使用grid栅格布局
iview中使用grid栅格布局在后台开发中使用栅格布局在一些情况下是很舒服了的,比如利用栅格来打造table的效果,实现左侧是标题右侧是值得表格titlevaluetitlevaluetitlevaluetitlevaltitlevaltitlevaluetitlevaltitlevaltitlevaluetitlevaltit...原创 2019-11-07 21:46:10 · 3832 阅读 · 0 评论 -
iview中的Select选择器
iview中的Select选择器在后台系统中使用Select是非常常见的,话不多说<Select v-model="model2" size="small" style="width:100px" @on-change="xxxxxx"> <Option v-for="item in cityList" :value="item.value" :key="it...原创 2019-11-07 21:46:49 · 2382 阅读 · 0 评论 -
iview中的Modal和Drawer
iview中的Modal和Drawer在后台开发中,经常使用到Modal和Drawer,尤其是Drawer用的很多很多,比如一些添加和编辑操作,就使用Drawer来呈现表单。 <Drawer title="角色设置" // 设置Drawer的标题 v-model="roleCountUpdate" // 绑定的值用来表示是否显示这个Drawer ...原创 2019-11-07 21:51:23 · 2826 阅读 · 0 评论 -
iview中渲染select组件的问题
iview中渲染select组件的问题render: (h, params) => { if (params.row.$isEdit === true) { return h('div', { domProps: { style: 'display: flex;justi...原创 2019-11-07 21:51:58 · 531 阅读 · 0 评论 -
iview中switch在中render中渲染的问题
iview中switch在中render中渲染的问题在后台页面中的一些数据需要操作人员来设置是否上架(或是否售卖),在使用iview的table组件的时候用数据中想要一些样式,是需要render来渲染的。在后台系统的开发中,在列表展示的时候需要一个按钮来设置这个商品是否上架。在按钮渲染的时候选用的是对号和叉号的switch组件<Switch> <Icon type="m...原创 2019-11-07 21:52:33 · 1147 阅读 · 0 评论 -
iview中TimePicker在render中的渲染
iview中TimePicker在render中的渲染在时间选择的时候遇到只需要小时和分钟// 设置时间格式format="HH:MM"那在render中渲染的是方式是return h('TimePicker', { props: { format: 'HH:mm', style: ...原创 2019-11-07 21:53:12 · 539 阅读 · 0 评论 -
iview中的Table中渲染Icon
iview中的Table中渲染Icon在一些表格的末尾,一般会有一些操作,这种操作在后台系统中是很常见的,可以自行的渲染Button,或者Icon来当做按钮。那么在table中的具体的做法如下:{ title: '操作', key: 'action', align: 'left', width: '10%', ...原创 2019-11-07 21:53:48 · 954 阅读 · 0 评论 -
iview中Table属性中的on-row-click属性
iview中Table属性中的on-row-click属性on-row-click属性,在此后台系统中用来从左侧的table中选中一项,作为值传递给右侧的表格,右侧表格从拿到的数据,渲染出对应的列表<Table :columns="ruleGroupColumns" // 需要渲染的表格的表头,key值,宽度,和动态渲染的render函数 :data="ru...原创 2019-11-07 21:54:52 · 3923 阅读 · 1 评论 -
$set的使用
$set的使用在后台系统开发中,有些表格 需要在页面内更新,但是更新的值并不会实时的在页面中更新。在vue文档中有一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。也就是说当你在编辑表格中的数据后,点击保存,数据已经更新到数据库但是页面却并不会更新视图那么正确的设置方式:this.$set(this.data,"key",value')受 ES5 的限制,Vue.j...原创 2019-11-07 21:58:54 · 341 阅读 · 0 评论 -
view中的穿梭框==>>批量管理人员
iview中的穿梭框==>>批量管理人员在后台开发中遇到了一个场景,比如前段人不够了,需要从其他非前段人员中选取人员到前段组中,但是一个一个的修改角色属性不是人干的事,因此用到了穿梭框。在iview官网中的穿梭框的介绍很简单,但是我在使用的时候却不怎么顺利。一个是不知道怎么给源组添加数据,一个是不知道怎么给目标组设置数据。总结起来就是不会用!<Transfer :da...原创 2019-11-07 21:36:52 · 415 阅读 · 0 评论