iview组件
IT博客技术分享
没有做不到的,只有想不到的!
展开
-
iview 里面取值为布尔值类型的demo
方法一:1.用switch实现html:<i-switch v-model="formAddData.paramVal" @on-change="changeSwitch" />js: //布尔类型的switch开关 changeSwitch(status){ console.log("status:",st...原创 2019-11-14 15:46:46 · 1070 阅读 · 0 评论 -
iview ui 全静态表格,增删改查,分页功能
本demo是一个非常全的,后台管理系统类的表单:增、删、改、查。4个主要功能都齐全的demo,数据采用的本地变量数组加载时调用;非常适用于纯前端页面的渲染;欢迎大家done下学习,以及提问题;(非常适用于刚刚入手iview ui 库的小伙伴们)先上几张效果图:1.列表图:2.查询列表:3.点击详情报错:通过直接调用以下方法来使用:this.$Modal.info(config)去你的main.js 里面查一下你的 mode引入进来了吗?这上面三...原创 2020-06-05 17:42:02 · 1254 阅读 · 0 评论 -
Vue.js基于iView树形控件(tree)和多选框组(CheckboxGroup)实现的动态权限功能分配菜单树的render渲染效果(二)
先上效果图:1.checkbox 勾选框对齐的方式, 可以采用修改组件的css样式来改,我这边设置的是左对齐的方式。>>>.ivu-checkbox-group{ position: fixed; left: 400px;}2.判断权限,上级给下级分配权限,才可以勾选操作。很明显这个用也是 diasbled:true 的属性控制的。在数组里面塞进一个变量来控制:disabled: true,禁止使用, false 可使用 ..原创 2021-03-18 13:53:06 · 1153 阅读 · 1 评论 -
iview modal 弹框里面 套用 element table表格并且可以多选,解决回显的坑
先上效果图:点击详情和编辑的时候,modal框打开,table表格数据回显问题:那么想要实现table的多选框回显,前提得有多选框,而实现回显也主要有依赖多选框自带的几个事件,当表格存在多选框时这几个事件便可以生效: <FormItem label="角色权限:" prop="roleRight"> <el-card> <el-table ref="...原创 2021-01-13 17:01:34 · 1374 阅读 · 0 评论 -
iview render 里面怎么用 disabled
iview table中按钮根据条件设置disabled效果图如下:初始的table加了disabled的Table注: 当socket 没有返回 分区状态的时候,右侧的操作里面的按钮置灰不可点击。判断条件:disabled:(!params.row.excutStatus)代码实现方式:disabled后直接跟true或者false的条件{ title: "广播信源类型", key: "infoSourceTypeName", width: 200, align: "..原创 2020-12-23 11:09:10 · 1752 阅读 · 0 评论 -
iview表格table某列内容太长,同时用tooltip: true和render冲突的问题
先上改好的效果图:先说需求问题,服务类型这列我这里收到的是后台返回的数值,不是直接的name,需要在render函数里面用for 循环根据id查找name,然后显示。但是 最后的值:texts 有些时候太长 超过了width:180 ,所以用tooltip:'false',不能生效,需要换一个思路。解决办法:截取列显示字数,我这里是显示7位字符串。然后鼠标悬浮的时候显示所有的name,解决办法:大功告成,全部代码如下: {title:...原创 2020-12-03 17:14:00 · 2144 阅读 · 1 评论 -
iview checkebox 监听每次checked的值变化
如下图:我想监听每次选中的值的变化;第一想到的肯定是watch进行监听:如何去监听或者用watch去侦查data发生了变化?如果只是监听数组列表项的增减,直接对数组进行监听就好了watch:{ checked_itemData(newVal,oldVal) { }}html: <!-- 分区--> <Col span="8" class="partition" style="bor.原创 2020-08-25 09:18:26 · 764 阅读 · 0 评论 -
iView 通过render函数 实现 InputNumber 的双向数据绑定,踩坑二、
使用inputNumber 标签 在table表格里面实现 双向数据绑定1. 全选 table 底部的 音量按钮会显示 ,同时音量按钮值的改变,table表格里面的row每行的音量值也会跟着变2.table表格多选的时候,表格选中2行的时候,table 底部的 音量按钮会显示...同(1)3.取消 分每行的取消和全部取消,目前取消,把t able 底部的 音量按钮 绑定的值清空4.table表格 回显的时候,不能直接用 table绑定的那个数组,用另外一个数组过度一下,否则会出现,回显和其.原创 2020-08-06 15:36:40 · 827 阅读 · 0 评论 -
iview验证input的时候限制输入空格(首尾输入空格)
iview验证input的时候限制输入空格(首尾输入空格)vue方法:js代码如下: // 分区名称验证 const validateareaName = (rule, value, callback) => { var regu = /^ +| +$/g // 匹配空格 if (value === '') { return callback(new Error('请输入分区名称!')) } else if (val.原创 2020-06-18 14:40:52 · 1861 阅读 · 0 评论 -
iview ui table表格中嵌套input、select 2个功能
理解table如何嵌套input、select首先要理解vue的render函数可以参考:vue render函数介绍。当然,也可以复制下面的demo,自己尝试一下:{ title: 'Action', key: 'action', width: 150, align: 'center',原创 2020-06-05 18:26:37 · 1717 阅读 · 0 评论 -
iview table 操作用slot 写法(以及为啥不显示)
先说为啥不显示,因为:iview 3.2.0才开始支持的slot的写法;iview 3.2.0 以下是不支持的,所以去升级iview;npm install iview全部代码如下:<template> <div> <Table border :columns="columns" :data="data" > <template> <Poptip slot-scope="{row, index}" slo..原创 2020-06-05 16:04:49 · 6609 阅读 · 1 评论 -
iview ui 和elment ui 的按需引用,减小项目体积
一、先说iview ui 的按需引用首先、先装上iview 的依赖包;4.0的版本已经升级了,新的安装方法:NPM 安装 #推荐使用 npm 来安装,享受生态圈和工具带来的便利,更好地和 webpack 配合使用,当然,我们也推荐使用 ES2015。$ npm install view-design --save引入 ViewUI#一般在 webpack 入口页面ma...原创 2020-03-27 14:30:59 · 980 阅读 · 0 评论 -
iview表格每次checkbox每次只能选择一行,选择第2行,上行checked就消失
思路:1.render函数使用checkbox,key的值就是false。就是是否选中了。2.在on-click里调用一个方法:先给table的数组:this.materialData里面赛一个变量,初始值为false,如果选中了就有值,默认为true; for(let i = 0; i < this.materialData.length; i+...原创 2020-01-09 17:20:45 · 1290 阅读 · 3 评论 -
iview table列表加塞2列数据
table表格里面的某列数据时从其他接口取出来的。列如:分区这列数据时不是table列表的:data="historyData" 里面返回的,需要前面在赋值列表值前,赛到 this.historyData 里面;下面是主要代码的逻辑: for(let i=0; i<result.length; i++){ // let names = []; ...原创 2020-01-06 12:22:10 · 637 阅读 · 0 评论 -
(iview)根据权限table表格控制columns 的某列显示与隐藏(通用)
iview根据权限table表格控制columns 的某列显示与隐藏(通用)先给一个UI设计图:1.需求描述根据权限控制某列中显示与隐藏2.使用场景根据不同用户(普通用户,vip用户),展示对应的列3.解决思路将原来的columns copy一份,然后根据权限去让它过滤对应的列,就能返回最新的columns了举个例子,代码如下created() ...原创 2020-01-04 12:43:13 · 8313 阅读 · 0 评论 -
iview ui里面 table表格title提示和气泡提示
iview--table表格title提示和气泡提示说明:文本不换行,超出显示省略号,两种提示方式,title提示和气泡提示气泡提示不足:当内容没超过一行,也会出现气泡提示。觉得不如Element-UI的table组件好用。方法一、<Table border :columns="tableColumn" :data="tableData"></Table&...原创 2020-01-04 09:39:30 · 1912 阅读 · 0 评论 -
iview里的Message(全局提示)与Notice(通知提醒)全局配置方法
根据api 官方文档:给出的message的提示:this.$Message.config({ top: 50, duration: 3});属性 说明 类型 默认值 top 提示组件距离顶端的距离,单位像素 Number 24 duration 默认自动关闭的延时,单位秒 Number 1.5...原创 2019-12-27 15:52:26 · 7525 阅读 · 0 评论 -
iView 通过render函数 实现 InputNumber 的双向数据绑定,踩坑一、
InputNumber 踩坑“先给效果图:html:<!-- 列表 --> <Col span="15"> <Table border size="small" ref="selection" :height="height" :columns="historyColumns"...原创 2019-12-25 16:52:55 · 1198 阅读 · 0 评论 -
iview 做tree树结构3级结构,绑定模拟接口数据
iview 做(Tree)树结构3级结构,模拟接口数据先上效果图:后台接口数据返回是这个格式:data2:[{"line": { "lineId": "02", "lineName": "2号线", "lineSname": null, "lineEname": null, "stationSName": null, "stationEName": null, "st...原创 2019-12-11 10:23:43 · 1180 阅读 · 0 评论 -
iview 里面 select 模拟数据且有初始数据显示
代码如下:<template> <Row> <Col span="5" style="padding-right:10px"> <Select v-model="formAdd.model"> <Option v-for="(item,index) i...原创 2019-08-21 18:03:24 · 590 阅读 · 0 评论 -
iview 里面的radio 实现默认单选选中的值(本次不使用render函数)
根据官网实现如下:代码如下:<template> <RadioGroup v-model="disabledGroup"> <Radio label="金斑蝶"></Radio> <Radio label="爪哇犀牛"></Radio> <Radio la...原创 2019-08-22 14:58:51 · 2702 阅读 · 0 评论 -
Vue.js基于iView树形控件(tree)和多选框组(CheckboxGroup)实现的动态权限功能分配菜单树的render渲染效果
Vue.js 基于iView树形控件(tree)和多选框组(CheckboxGroup)实现的动态权限功能分配菜单树的render渲染效果在实现角色-权限管理时遇到了交互上的问题,即:需要以树形样式列出系统中所有的菜单,并在每一个菜单后面列表这个菜单拥有的所有权限,用户可以勾选以设置是否开启这个菜单的对应权限功能,以下是实现了基于iview树形菜单的动态权限赋值功能的图:其中使用到了V...原创 2019-08-12 09:57:01 · 4637 阅读 · 0 评论 -
基于Vue.js的iView组件库table组件内render 里面 tab 里面的单选
先上效果图:打印选中的结果:代码如下:<template> <div> <!-- 列表信息 --> <div class="listfile"> <i-table border ref="selection" :columns="columns2" ...原创 2019-05-17 16:53:49 · 815 阅读 · 0 评论 -
iview table 点击是input(可编辑)的render函数中如何设置元素的样式(2)
本文在 iview table 点击是input(可编辑)的render函数中如何设置元素的样式(1)的基础上新增加了,当初始化为空时,点击也有input 出现 以及传值时,如何传变量;先上效果图:2个事项:①:当 input初始化为空时 ,给render 里面的div 给个高度, 点击区域时,input 就出现了 。②:传值时注意事项:这么传值就可以:thi...原创 2019-05-18 17:20:46 · 2313 阅读 · 0 评论 -
iview table 点击是input(可编辑)的render函数中如何设置元素的样式(1)
一、iview实现table的可编辑遇到同事请教的这个问题,没接触过iview,以为和element一样,只需要在table-column中使用作用域插槽即可,简单又方便,结果发现它居然是用reder函数进行渲染的,so,仔细琢磨一下,写了下面的demo,希望对大家有用。多说无益上 代码:<template> <div class="body"> ...原创 2019-05-18 17:13:10 · 4764 阅读 · 0 评论 -
iview 里面的ip 组件封装
先上效果图:1.这样的空就按是常用的,iview上面暂时无此组件;2.需要自己去封装一下。具体代码如下:父组件代码: (test.vue)<template><div class="body"> <Form ref="formAddData" label-position="right" :label-width="120">...原创 2019-05-13 17:08:10 · 776 阅读 · 1 评论 -
iview里面的select可以多选,同时动态显示你选了几条数据
先上效果图:分析:要想让上面的显示,下面的select的选中几条的数据,只需要把下面的selcet加一个on-change事件绑定就可以。然后判断里面的length 的长度,就是你需要的结果;@on-change="get_num"get_num(data){ console.log("data",data); ...原创 2019-05-11 09:09:47 · 6357 阅读 · 0 评论 -
iview里面的使用draggable拖拽移动,禁止可以点击其他区域
分析:1.iview里面的使用draggable拖拽移动后会让弹层消失,文档里面:mask 是否显示遮罩层,开启 draggable 时,强制不显示 2.由此看到,iview开启 draggable 时,弹层强制不显示了,所以需要设置,不能点击其他区域,尤其是页面的按钮;解决方法:iview里面有个默认的属性:.ivu-modal-no-mask {...原创 2019-05-11 09:05:07 · 8120 阅读 · 2 评论 -
iview 自带exel表 导出功能(后缀名为 .csv)需要手动修改
先上效果图:方法:<template> <div> <Table :columns="columns8" :data="data7" size="small" ref="table"></Table> <br> <Button type="primary" siz...原创 2019-09-18 11:31:22 · 1066 阅读 · 1 评论 -
vue iviewUI里面的 Checkbox 多选框 多组全选或者全不选
先看效果图:部分选中的状态:全部选中的状态:部分全选选中的状态:打印选中的id:主要代码如下:code:<div class="group_item" v-for="(items,key) in historyDataList" :key="key"> <div class="tit...原创 2019-09-26 09:19:47 · 9117 阅读 · 9 评论 -
ivew table列表里 render button 修改单个的样式或者禁用或者隐藏
很简单废话不多说,看代码: h('a', { props: { }, attrs: { ...原创 2019-11-01 12:51:37 · 954 阅读 · 0 评论