如题,使用iView的Input输入框(或i-input)嵌套在<table></table>标签中会产生一个间隙问题,如图(前缀和后缀都会举例输入框有个空隙): 代码如下: <table> <tr> <td> <i-input v-model="cg.mt_sh" type="tel" style="width: 250px;" :maxlength="50"> <span slot="prepend">国家级</span&…

2022-04-10 0条评论 968点热度 0人点赞 admin 阅读全文

iView的表格虽然有了很多定制化的功能,不过有一个需求,官方始终没有实现,那就是表格的分组功能,来看下这个需求,客户想要实现如图的分组功能: 根据时间的不同,按照『今天』,『昨天』,『一周内』,『一个月内』,『更早』,另外根据其他需求的不同,根据其他类别进行分组展示。 虽然官方没有提供现成的解决方案,不过iView表格文档的『特定样式』进行改造,来实现这部分效果。这部分网上查了没有相关的实现,是我自己想出来的,应该算是独家吧,哈哈。 如上图,分组显示的列其实也是普通的一行,只是使用列合并把整行都跨过去了。另外针对…

2022-03-12 0条评论 1061点热度 0人点赞 admin 阅读全文

iView的Form里,使用了baidu的edutior,vue下整合还是比较简单的,推荐下这个项目:https://github.com/haochuan9421/vue-ueditor-wrap,按照REAME.md一步步就能完成,不过遇到一个问题,就是在form-item下使用工具栏的整体高度如下,显得不协调,图示如下: 经过研究,只需要在.editor-form-item下的.ivu-form-item-content设置line-height为unset就可以了 代码如下: <style type=…

2022-01-30 0条评论 528点热度 0人点赞 admin 阅读全文

iView的table组件,使用render函数,需要展示html内容。 { title: '内容', key: "content", minWidth: 304, render: function (h, params) { return h("div", { // 可以带class的样式 class: 'quill-editor-div', // 可以带style样式 style: { // marginTop: '10px' }, domProps: { innerHTML: params.row.conte…

2022-01-16 0条评论 586点热度 0人点赞 admin 阅读全文

Vue项目中(iView/ViewDesign)使用了quill富文本编辑器项目地址:https://github.com/surmon-china/vue-quill-editor 不过有个问题,就是工具栏的内容没有垂直对齐,如图所示: <form-item label="内容"> <quill-editor ref="quillEditor" class="quill-editor" v-model="content" :options="editorOptionSimple" ><…

2022-01-15 0条评论 458点热度 0人点赞 admin 阅读全文

iView下的表单,例如登录表单,开发需求是填写完成表单后,按键盘上的回车需要自动调用Button的Submit方法(就是按回车和按Button的@click方法是一样的) 实现关键点: 加上 @keydown.native.enter.prevent='someMethod' <Form ref="loginForm" :model="loginForm" @keydown.native.enter.prevent="loginClicked" inline> <FormItem> <…

2021-12-11 0条评论 482点热度 0人点赞 admin 阅读全文

iView中Upload上传组件,配合表格组件,想要实现这样的功能(即要有拖拽上传,还有上传列表,以及上传进度),如图: 话不多说,直接上干货代码 Html部分 <row class="" style=""> <i-col span="20"> <upload ref="upload" :show-upload-list="false" :on-success="handleSuccess" :on-error="handleError" :format="allowedFormat"…

2021-11-07 0条评论 1265点热度 0人点赞 admin 阅读全文

遇到一个问题,在Vue中使用img显示图片,如下代码是可以显示出来图片的。 <!--使用@代表根目录--> <img src="@/assets/add.svg"  @click="addClicked"/> 但是如果通过绑定的方式(或者说使用动态的src的时候)就不行了: <template> <div> <img :src="addImgSrc"  @click="addClicked"/> </div> <template> …

2021-07-05 0条评论 1261点热度 0人点赞 admin 阅读全文

iView的Tabs 标签页组件里,里面的label想用render动态设置label的文字,render函数并可以接收参数,可以使用参数,如下: <!--根据items动态生成多个TabPane--> <TabPane :label="tabLabel(item, index)" v-for="(item, index) in items"> </TabPane> tabLabel: function (item, index) { return function (h) { …

2021-06-25 0条评论 1109点热度 0人点赞 admin 阅读全文

iView里在render下渲染出来的组件里,是不能直接做数据绑定的,不过只要能在组件初始化的时候,给组件赋值,以及用户交互下监听组件状态改变,即时改变相对应的data,就就符合我们的预期了,下面举例介绍 以Select为例: { title: '类型', key: 'type', width: 300, render: (h, params) => { return h('Select', { props: { // 初始化赋值,从params.row中挑出给select初始化赋值 value: param…

2021-06-20 0条评论 683点热度 0人点赞 admin 阅读全文