如题，使用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&…

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

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=…

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…

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" ><…

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

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"…

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

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) { …

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