iview
达拉崩巴斑得贝迪卜多比鲁翁_
这个作者很懒,什么都没留下…
展开
-
iview的走马灯嵌套在模态框中,宽度为0的解决方案
在项目开发中用到了iview的走马灯嵌套在模态框中这种需求,结果发现走马灯图片不显示,打开控制台审查元素发现走马灯的内部盒子width为0,自己感觉在页面初始化的时候,因为模态框初始值为false,所以,走马灯渲染的时候错误的动态计算了宽度,为0,所以解决方案为让模态框和走马灯通过统一状态控制,同时渲染。你可以将Modal 的v-model="imgVisible"这个状态值同步到走马灯的<Carousel v-if="imgVisible"></Carouse>,或者如下,图片集合原创 2021-04-27 19:03:23 · 336 阅读 · 0 评论 -
(一)vue 数据更新 试图不更新 解决办法
一: 深拷贝深拷贝原数组出来,修改深拷贝的数组后,再把深拷贝的数组重新赋值到视图渲染数组。 this.directData.forEach((ele, index) => { if (ele.name === item) { let curEdit = deepCopy(this.editFormData) curEdit.goodsId = ele.id curEdit.goodsName = ele.name原创 2021-04-14 14:17:57 · 234 阅读 · 2 评论 -
vue的style方式绑定行内样式-background-image的方式等
一:<template> <div id="app"> <div class="y_bj" :style="y_bj"></div> </div></template><script>import { Toast } from "vant";export default { data() { return { y_bj: { backgroundImage:转载 2021-04-06 15:17:42 · 1712 阅读 · 1 评论 -
(五) : iview 时间选择器,校验不成功
错误的校验 <FormItem :label="$t('开始时间')" prop="template_benefit_info[0].start_date" :rules="{ required: true, message: $t('请选择开始时间'), trigger: 'change'}"> <DatePicker format="yyyy-MM-dd HH:m.原创 2021-03-23 10:55:36 · 768 阅读 · 1 评论 -
(三): 十六进制转化为rgb
封装// 十六进制转化为rgbexport const hexToRgb = hex => { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null}/**原创 2021-03-23 10:09:12 · 281 阅读 · 1 评论 -
(一) : iview-form 表单循环数组 - 验证规则
实现效果:参考官网最后一项: 去官网也可以看一下在线示例 : https://run.iviewui.com/17l6oYA6代码实现: <!-- 自定义栏位 --> <Card :title="$t('自定义栏位')" class="mt10"> <!--使用draggable组件--> <draggable原创 2021-03-23 10:03:41 · 1411 阅读 · 1 评论 -
iview Table列表中增加字体图标
iview Table列表中增加字体图标一:{ 'title': this.$t('设备别名'), 'key': 'actStatus', render: (h, params) => { return h('div', [ h('Icon', { props: { type: 'ios-create-outline'原创 2021-02-22 15:02:43 · 445 阅读 · 3 评论 -
iview 表单提交之前验证是否符合条件
在表单提交之前 调用接口校验用户输入是否符合条件符合则通过, 不符合 不让提交 <Card :title="title"> <Form class="mt10" :model="editFormData" :rules="editFormValidate" style="width:500px;" ref="editForm" :label-width="100"> <FormItem label="商品分类 :" label-positi原创 2021-01-05 11:26:05 · 621 阅读 · 13 评论 -
iview table后端分页 多选 翻页选中回显
在iview的table组件中,前端在多选时如果点击下一页则丢失了上一页table的多选数据(由于采用的后端分页,每次翻页会直接刷新为新数据)实现效果全选反选 选中条 取消单条代码部分定义数组 selectedData: [], // 选中的数组 arr1: [], // 原本 arr2: [] // 去重后的表格 <Table class="mt20" :data="tableData" :loading="loading" :column原创 2020-12-30 15:16:48 · 1923 阅读 · 5 评论 -
iview tabs里面放入 i-switch slot的写法
{ 'title': '状态', 'key': 'status', render: (h, params) => { return h( 'i-switch', { props: { trueValue: 1, falseValue: 0, ...原创 2020-12-28 19:46:14 · 593 阅读 · 1 评论 -
iview中嵌套使用tabs注意事项
说明: iview组件中当嵌套使用 Tabs时,需要在Tabs中指定 name 属性来区分层级,然后在TabPane 中设置 tab 属性指向对应 Tabs 的 name 字段。正确示例: 在每一个Tabs中都需要设置name属性,然后在其包含的所有直接TabPane中设置tab属性指向其对应的Tabs的 name 字段。<Tabs name="tab1" > <TabPane label="标签1" tab="tab1"> <Tabs name="tab1-1转载 2020-12-28 19:44:16 · 861 阅读 · 1 评论 -
Vue 前端导出后端返回的excel文件
<Card class="mt20" title="设备数据"> <div slot="extra"> <a class="ml10" href="#" @click.prevent="toExcel"> <Icon type="md-download" /> 导出设备表 </a> </div> <原创 2020-12-23 18:56:06 · 345 阅读 · 1 评论 -
Vue+iview实现自定义格式导出Excel文件
背景:项目中要实现一个导出Excel文件模板的功能,原来实现是通过后台生成然后前端请求下载,这样要消耗IO资源,然后看了一下之前项目的导出功能,发现原来Vue+iview可以实现本地数据导出,不过iview自带的方法只能导入CSV格式的文件,然后我是需要导出xlsx格式的文件,研究了一下,通过简单修改iview源码,可以实现自定义格式的文件,比如Excel,txt等,下面走起1.先添加导出按钮<Button type="primary" @click="exportData" &转载 2020-12-23 18:32:10 · 994 阅读 · 7 评论 -
iview选择月份 月初月末 时间戳格式
本文记录的几个要点1、结束时间不得比开始时间提前2、当前月份之后不可选3、开始时间为当月的第一天 eg: 01月01日 00:00:00结束时间为当月的最后一天 eg: 12月31日 23:59:59转化为时间戳格式入参4、默认展示向前推12个月eg: 2019-12 ~ 2020-12****效果图:(当前月份12月)代码实现: <date-picker type="month" :value="leftTime" placeholder="请选择开始时间" :op原创 2020-12-16 11:03:50 · 585 阅读 · 0 评论 -
iview中时间选择器可设置选择范围方法(一个月 一周等)
代码如下:iview官网 <DatePicker type="datetimerange" :clearable="false" :options="options" :value='changeTime' placement="bottom-end" format="yyyy-MM-dd HH:mm:ss"原创 2020-11-23 14:22:35 · 2279 阅读 · 0 评论 -
iview日期控件 双向绑定日期
官网查看iview准备工作import { getDate, getTime } from '@/libs/util'@/libs/util/** * @description 日期时间转换时间戳 */export const getTime = dt => { return dt ? new Date(dt).getTime() : new Date().getTime()}/** * @description 时间戳转换日期时间 */export const ge原创 2020-10-27 17:38:40 · 406 阅读 · 0 评论