![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
iview
Yilia-Feng
我有一只大金毛
展开
-
iview table tree可编辑指定列
先上效果图:需求:1、表格里放tree2、Formula列 可编辑下拉框3、Min、Max 可编辑数字输入框4、有且仅有一个编辑框显示在界面上实现:1、表格<Table row-key="id" :colunms="colunms" :data="tableData" border @on-expand-tree="onexpandtree"></Table>2、初始化参数data(){ return{ formulaList:[{ id:0,原创 2021-11-11 17:33:09 · 1166 阅读 · 0 评论 -
iview table 自定义单元格背景色
效果图首先iview 官网有对单元格样式做过讲解单元格:通过给数据 data 设置字段 cellClassName 可以给任意一个单元格指定样式。1.初始化tableColumns: [{ title: "客户", key: 'companyName' }, { title: "区域", key: 'region' }, { title: "操作系统", key: 'os' }, { ti原创 2021-08-31 16:37:55 · 1597 阅读 · 0 评论 -
iview table 合并前三列
先上效果图需求:合并客户、区域、操作系统三列 (要点前后端需统一好返参顺序 合并内容需相邻 否则无法做循环判断)实现1.目前iview 官网上有合并列的例子 大家可以先去自行研究 这里就不再做过多的讲解 以效果图为例客户列:return [10,1] (10行1列) 其余 return [0,0] (表示合并0行0列,即这是被合并的单元格)区域列:return [8,1] 、return [2,1] 其余return [0,0]操作系统:return [2,1] 、return [1,1]、原创 2021-08-18 13:03:51 · 653 阅读 · 0 评论 -
vue iview动态循环的表单里的select下拉框的值不能重复选择
先上效果图:实现1.循环显示名称下拉框<!-- 成本中心 --><div v-for="(item,index) in costAllocationForm.apportionCostCenterRelationshipDTOList" :key="index"> <Row :gutter="4" style="margin-bottom:20px;"> <Col span="10"> <!--原创 2021-07-20 15:02:33 · 1023 阅读 · 0 评论 -
iview 表单自定义验证规则判断两个输入框逻辑且调用后端接口
相信大家一定遇到过这种情况,iview有表单验证,但有时后台也有接口作为表单验证,话不多说上代码。一、ruleValidate里的写法二、写validAccess方法这段代码写在data()里面然后要把this赋值给self 不然找不到v-model里的内容。...原创 2019-04-18 12:32:09 · 1272 阅读 · 1 评论 -
vue+iview 动态循环表头+编辑单元格
先上效果图:需求:1.动态循环后端返回的表头 以及 表格数据2.鼠标悬浮动态列 显示key:value3.编辑table里的 单元格动态循环表头因为是后端返回表头数组 固用不了render 只能换种方式用slot动态循环显示表头 具体如下<Table :no-data-text="$t('common.noData')" :columns="tableColumns" :data="tableData" border> <!-- 资源ID --> &l原创 2021-07-02 14:38:03 · 1217 阅读 · 1 评论 -
iview Row/Col栅格布局 Col空导致样式错乱
问题:“描述” 字段 后端返参为空 Col会往前移动一格解决: style=“min-height:1px;” <Col span="3" style="min-height: 1px;">{{tag.describe}}</Col>原创 2021-06-25 15:11:40 · 1141 阅读 · 0 评论 -
vue+iview 动态表头全选功能
需求:动态表头分个人信息、工作信息、教育信息三个模块 每个小模块都有全选按钮 点击每个模块下的子checkbox 表格里的列根据表头顺序插入效果图:实现:1.动态表头<!-- 动态表头 --><Collapse> <Panel name="1"> <span style="font-size:13px;font-weight:600;">动态表头</span> <template sl原创 2021-06-09 18:00:54 · 2655 阅读 · 2 评论 -
vue+iview 内网预览(本文重点)+外网预览word、excel、pdf、ppt
访问内网文件思路如下:1.后端将文件转为二进制文件流 word+excel将其转为html 从而实现文件预览2.pdf没这么复杂具体可看下文3.ppt的实现方式是后端将ppt转为pdf 然后调用pdf接口上众所期待的效果图:wordexcelpdf一、预览公网上的文件(较为简单 所以放第一)1.预览公网能访问的文件 使用XDOC就能实现//file_url是你的文件地址<a href="http://www.xdocin.com/xdoc?_func=to&_for原创 2021-05-28 21:14:17 · 7488 阅读 · 13 评论 -
iview 多级循环表单验证
先上效果图需求:需要有多个明细 每个明细下的账号能多行添加(以及给Input Select加表单验证)<!-- 明细 --><div v-for="(item,index) in bankInformationForm.details" :key="index"> <Row :gutter="10" style="margin-bottom: 10px;"> <Col span="24"> <Car原创 2021-05-20 12:07:12 · 786 阅读 · 0 评论 -
vue v-if判断数组中是否存在某个值 做显示隐藏(iview
多选下拉框elasticComputeCloudWarningForm.noticeType=[0,1,2,3]<FormItem :label="$t('alarms.common.noticeType')" prop="noticeType"> <Select v-model="elasticComputeCloudWarningForm.noticeType" multiple style="width:300px;" :placeholder="$t('alarms.comm原创 2021-04-29 10:43:55 · 5277 阅读 · 0 评论 -
vue中 快速输入时 获取最后一次接口返回值
分页查询时 有多个Input搜索框 为了用户体验 分页查询时用了@on-change事件 也就是说 每做一次操作 就会调用后端分页查询接口 此时出现一个问题 在快速输入的时候 最后一次返回的值被前面的请求结果给覆盖了由于@on-change事件缘故 第一次传参是1(图一最后一次是12 (图二此时很明显看到 后端没有任何问题 但前端显示的效果是图二的返参数解决方案给分页接口加延时setTimeout(() => {}, 1000);// 分页显示数据/****************原创 2021-04-22 16:41:05 · 968 阅读 · 1 评论 -
vue+iview+echarts 循环显示echarts折线图且放大该图表
需求:一共有四种云平台类型分别为:Aws、阿里云、Azure、Vmware,针对这四种类型 循环显示各类型的直线图循环不同种类折线图<Row :gutter="16"> <Col span="6" v-for="(item,index) in (this.$route.query.accountTypeName=='AWS'? awsList:this.$route.query.accountTypeName=='Aliyun'? alyList:this.$route.que原创 2021-04-21 14:27:00 · 1248 阅读 · 0 评论 -
vue+iview 表单验证不成功会关闭弹窗 解决方案
问题来源一个项目里必然会有表单提交需求 表单里必定会有必填字段 那么点击"提交"按钮时 如果必填项未填 Modal弹出框是不能关闭的 但现在相反 弹窗关闭了 解决方案如下表单<Modal v-model="employeeEntryInformationModel" title="添加入职信息'" @on-cancel="cancel('employeeEntryInformationForm')" @on-ok="submit('employeeEntryInformationForm')"原创 2021-01-26 17:53:07 · 1401 阅读 · 1 评论 -
npm报错./node_modules/view-design/dist/styles/iview.css 解决方案
在根文件里面新建一个文件postcss.config.js ,在里面添加以下代码:module.exports = { plugins: { 'autoprefixer': {browsers: 'last 5 version'} } }添加完上述代码:npm run dev 就能正常运行原创 2020-11-13 11:24:28 · 1982 阅读 · 0 评论 -
vue iview 隐藏Table组件里的某一列
假设我要隐藏columns里的 “账户组名称” columns: [{ type: 'selection', width: 60, align: 'center'},{ title: '账号ID', key: 'accountIdString'},{ title: '账号名称', key: 'accountName'},{ title: '账户组名称', key: 'accountGroupName'}】2.根.原创 2020-05-28 14:09:16 · 7156 阅读 · 0 评论