iView(View UI Design) 在使用表单操作表单内组件（例如选择框等）的时候，控制台会有个报错，如下： vue.min.js:6 TypeError: Cannot read properties of undefined (reading 'indexOf') at a.resetField (iview.min.js:1:229577) at a.required (iview.min.js:1:227418) at fn.run (vue.min.js:6:27749) at un (vue.m…
使用iview的表格的时候，可以设置『斑马纹』，表格会间隔显示不同颜色，用于区分不同行数据，不过有个需求，就是要自定义双行的背景色。 <Table class="my-table" stripe :columns="columns1" :data="data1"></Table> 查看文档并没有相关的设置，一番研究，可以给表格自定义class，设置双行的背景颜色，CSS代码如下： /*双数行颜色深一点*/ .my-table .ivu-table-stripe .ivu-table-body…
业务需求，需要iView的Tabs标签页，可以动态生成（可以动态增加/可以关闭） 实现起来根据官方的文档，http://v4.iviewui.com/components/tabs#KGB，稍微改了一下，就做出来了，代码如下： html代码，historyList就是一个数组，通过迭代来渲染出多个tabpane <tabs v-model="tab" :animated="false" type="card" closable @on-tab-remove="handleTabRemove" @on-clic…
iView/ViewDesign中的table表格里有个render函数，可以在单元格中另外渲染组件，现在有个需求，就是渲染出来的Input输入框或者InputNumber数字输入框，需要在获取焦点的时候，自动全部全部文本，可以提高使用者输入的效率。 经过研究，可以使用on监听on-focus事件，在传入的event方法，使用event.target.select()就行了。 详见如下示例： {title: '计划培训人数', key: "planNum", width: 112, align: 'center',…
如下代码所示的菜单： <Menu mode="horizontal" :active-name="activeMenu" ref="menu"> <MenuItem name="menu1"> <Icon type="ios-paper" /> 内容管理 </MenuItem> <MenuItem name="menu2"> <Icon type="ios-people" /> 用户管理 </MenuItem> </Menu&…
iView的模态对话框（Modal）默认情况下，如果里面的内容很多，需要滚动的时候，会使整个屏幕滚动（滚动条会出现在屏幕最右侧），而我们理想的状态应该是对话框中进行滚动，这样对话框的Header和Footer都不用滚动就一直显示在屏幕上，方便关闭和提交等按钮的直接操作。 实在的方法很简单，稍加修改CSS便可，css加上： .ivu-modal-body { max-height: calc(100vh - 150px); overflow-y: auto; } 我们给Modal里面的内容使用用的ivu-modal-…
iView下的Select选择器，使用了可搜索和远程搜索，示例如下： <Select v-model="model13" filterable :remote-method="remoteMethod1" :loading="loading1"> <Option v-for="(option, index) in options1" :value="option.value" :key="index">{{option.label}}</Option> </Select&g…
项目中使用了iView(View UI)，时候了表格，https://www.iviewui.com/components/table，有个需求，就是表格中的内容，需要排序，初步看了iview的文档和例子，是没有提到排序功能的。 其实文档有说到： Table props： draggable 3.3.0 是否开启拖拽调整行顺序，需配合 @on-drag-drop 事件使用 Table events： on-drag-drop 3.3.0 拖拽排序松开时触发，返回置换的两行数据索引 index1, index2 利用…
iView的Input输入框，希望用户点到输入框的时候，自动全选输入框里内容，方便用户直接输入新的文字内容。 可以使用@on-focus来实现，给on-focus绑定方法，$event.target.select()来全选内容，如下： <i-input v-model="cg.inSh" type="text" @on-focus="$event.target.select()" style="width: 250px;" :maxlength="50"> <span slot="prepend"…
iView中的Input输入框虽然可以限制type="number"，限制只能输入数字（任能输入小数点、+/-号），但是不能满足如下需求： 仅限制输入数字（整数）或者不带小数点，等其他随意限制的情况；另外希望VueJS原生的input也能限制自定义的输入。 我们可以利用@on-keydown监听键盘输入的内容（keyCode），给需要能输入的内容加入白名单，不在白名单中的字符使用event.returnValue = false; 来达到不允许输入目的。 Html代码如下： <i-input v-model=…
