使用iview的表格的时候,可以设置『斑马纹』,表格会间隔显示不同颜色,用于区分不同行数据,不过有个需求,就是要自定义双行的背景色。 <Table class="my-table" stripe :columns="columns1" :data="data1"></Table> 查看文档并没有相关的设置,一番研究,可以给表格自定义class,设置双行的背景颜色,CSS代码如下: /*双数行颜色深一点*/ .my-table .ivu-table-stripe .ivu-table-body…

2023-01-09 0条评论 48点热度 0人点赞 admin 阅读全文

业务需求,需要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…

2022-11-21 0条评论 75点热度 0人点赞 admin 阅读全文

iView/ViewDesign中的table表格里有个render函数,可以在单元格中另外渲染组件,现在有个需求,就是渲染出来的Input输入框或者InputNumber数字输入框,需要在获取焦点的时候,自动全部全部文本,可以提高使用者输入的效率。 经过研究,可以使用on监听on-focus事件,在传入的event方法,使用event.target.select()就行了。 详见如下示例: {title: '计划培训人数', key: "planNum", width: 112, align: 'center',…

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

如下代码所示的菜单: <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&…

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

iView的模态对话框(Modal)默认情况下,如果里面的内容很多,需要滚动的时候,会使整个屏幕滚动(滚动条会出现在屏幕最右侧),而我们理想的状态应该是对话框中进行滚动,这样对话框的Header和Footer都不用滚动就一直显示在屏幕上,方便关闭和提交等按钮的直接操作。 实在的方法很简单,稍加修改CSS便可,css加上: .ivu-modal-body { max-height: calc(100vh - 150px); overflow-y: auto; } 我们给Modal里面的内容使用用的ivu-modal-…

2022-08-11 0条评论 194点热度 0人点赞 admin 阅读全文

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…

2022-07-31 0条评论 310点热度 0人点赞 admin 阅读全文

项目中使用了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 利用…

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

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

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

iView中的Input输入框虽然可以限制type="number",限制只能输入数字(任能输入小数点、+/-号),但是不能满足如下需求: 仅限制输入数字(整数)或者不带小数点,等其他随意限制的情况;另外希望VueJS原生的input也能限制自定义的输入。 我们可以利用@on-keydown监听键盘输入的内容(keyCode),给需要能输入的内容加入白名单,不在白名单中的字符使用event.returnValue = false; 来达到不允许输入目的。 Html代码如下: <i-input v-model=…

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

如题,使用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条评论 480点热度 0人点赞 admin 阅读全文