IVIEW常用问题解决

news2024/9/27 7:44:22

1 FormItem 里面绑定帮助框 导致字段不检验

<FormItem label="备货通知单" prop="noticeIdStr">
        <Input style="width: 200px;" :title="noticeIdStr"
                icon="ios-list-box-outline"
                @on-click="showNotice" v-model="noticeIdStr"
                readonly placeholder="备货通知单" ref="notice"/>
</FormItem>

 @on-click 点击触发以下组件:
<!-- 备货通知单帮助框 -->
 <HelpBox v-model="noticeBoxShow"
          :autoSearch="autoSearch"
          :url="noticeBoxUrl"
          :columns="noticeBoxColumns"
          :title="noticeBoxTitle"
          :multiSelect="true"
          @onOk="onNoticeOk"
          @onClear="onNoticeClear"></HelpBox>

自定义校验规则:

    const validateNoticeIdStr = (rule, value, callback) => {
      let _noticeIdStr = this.noticeIdStr
      if (_noticeIdStr === '' || _noticeIdStr === null || _noticeIdStr === undefined) {
        callback(new Error('请选择备货通知单'))
      } else {
        callback()
      }
    }
      ruleValidate: {
        noticeIdStr:[
          {required: true, validator: validateNoticeIdStr, trigger: 'blur'}
        ],
      },

@onOk=“onNoticeOk”
@onClear=“onNoticeClear”
帮助框触发事件引发一下方法:

    onNoticeClear: function () {
     ...
      this.$nextTick(() => {
        this.$refs.notice.focus()
      })
    },

2 表格合并单元格

在这里插入图片描述

<template>
  <Table style="margin:15px 0;" :columns="columns" :data="tableData" :span-method="handleSpan"></Table>
</template>

<script>
export default {
  name: `IVTable表格合并单元格`,
  data() {
    return {
      columns: [
        {
          title: '集团编号',
          key: 'id'
        },
        {
          title: '集团名称',
          key: 'name'
        },
        {
          title: '集团所在城市',
          key: 'address'
        },
        {
          title: '测试时间',
          key: 'testTime'
        }
      ],
      tableData: [
        {
          id: '10001',
          name: '北京百度科技有限公司',
          address: '北京',
          testTime: '2023-11-01'
        },
        {
          id: '10001',
          name: '北京百度科技有限公司',
          address: '北京',
          testTime: '2023-11-02'
        },
        {
          id: '10001',
          name: '北京百度科技有限公司',
          address: '北京',
          testTime: '2023-11-03'
        },
        {
          id: '10002',
          name: '北京字节跳动科技有限公司',
          address: '北京',
          testTime: '2023-11-04'
        },
        {
          id: '10003',
          name: '北京快手科技有限公司',
          address: '北京',
          testTime: '2023-11-05'
        }
      ],

    }
  },
  methods: {}
}
</script>

<style>
</style>

在这里插入图片描述

<template>
  <Table stripe :columns="columns" :data="data1" :span-method="handleSpan"></Table>
</template>

<script>
export default {
  name: `IVTable表格合并单元格`,
  data() {
    return {
      columns: [
        {
          title: '类别',
          key: 'name',
        },
        {
          title: '指标内容',
          key: 'date',
        },
        {
          title: '性别',
          key: 'sex'
        },
        {
          title: '信息',
          key: 'info'
        },
      ],
      resData: [
        {
          name: 'John Brown',
          date: 18,
          sex: 'male',
          info: '测试123测试123测试123测试123测试123测试123测试123'
        },
        {
          name: 'John Brown',
          date: 18,
          sex: 'male',
          info: '测试123测试123测试123测试123测试123测试123测试123'
        },
        {
          name: 'John Brown1',
          date: 181,
          sex: 'male1',
          info: '测试123测试123测试123测试123测试123测试123测试123'
        },
        {
          name: 'John Brown2',
          date: 182,
          sex: 'male2',
          info: '测试123测试123测试123测试123测试123测试123测试123'
        },
        {
          name: 'John Brown2',
          date: 182,
          sex: 'male2',
          info: '测试123测试123测试123测试123测试123测试123测试123'
        },
        {
          name: 'John Brown2',
          date: 182,
          sex: 'male2',
          info: '测试123测试123测试123测试123测试123测试123测试123'
        },
      ],
      data1: []

    }
  },

  created() {
    this.assembleData(this.resData)
  },
  mounted() {
    //这里 this.resData即为后台返回的数据

  },
  methods: {
    //(想要合并第几列if里面的columnIndex判断就写几,默认从0开始)
    handleSpan({row, column, rowIndex, columnIndex}) {
      debugger
      //合并第1列,这里columnIndex==0,根据需求的不同,需要前端写死
      if (columnIndex == 0) {
        //计算合并的行数列数
        let x = row.mergeColumn == 0 ? 0 : row.mergeColumn
        let y = row.mergeColumn == 0 ? 0 : 1
        return [x, y]
      }
      if (columnIndex == 2) {
        //计算合并的行数列数
        let x = row.mergeColumn == 0 ? 0 : row.mergeColumn
        let y = row.mergeColumn == 0 ? 0 : 1
        return [x, y]
      }
    },
    assembleData(data) {
      let names = []
      //筛选出不重复的 name值,将其放到 names数组中
      data.forEach(e => {
        if (!names.includes(e.name)) {
          names.push(e.name)
        }
      })
      let nameNums = []
      //将names数组中的 name值设置默认合并0个单元格,放到 nameNums中
      names.forEach(e => {
        nameNums.push({name: e, num: 0})
      })
      //计算每种 name值所在行需要合并的单元格数
      data.forEach(e => {
        nameNums.forEach(n => {
          if (e.name == n.name) {
            n.num++
          }
        })
      })
      //将计算后的合并单元格数整合到 data中
      data.forEach(e => {
        nameNums.forEach(n => {
          if (e.name == n.name) {
            if (names.includes(e.name)) {
              e.mergeColumn = n.num
              //删除已经设置过的值(防止被合并的单元格进到这个 if 语句中)
              names.splice(names.indexOf(n.name), 1)
            } else {
              //被合并的单元格设置为 0
              e.mergeColumn = 0
            }
          }
        })
      })
      //将整理后的数据交给表格渲染
      this.data1 = data
    }
  },
}
</script>

<style>
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/695931.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

基于深度学习的细粒度漏洞检测框架VulDeeLocator

源自&#xff1a;IEEE Transactions on Dependable and Secure Computing 作者&#xff1a;Zhen Li, Deqing Zou, Shouhuai Xu, Zhaoxuan Chen, Yawei Zhu, Hai Jin. 背景与动机 设计与实现 图1 VulDeeLocator框架 图2 sSyVC和iSeVC的生成示例 图3 BRNN-vdl模型 实验结果 表…

【④MySQL函数】:让你的数据库操作更高效(一)

前言 ✨欢迎来到小K的MySQL专栏&#xff0c;本节将为大家带来MySQL字符串函数和数学函数的讲解✨ 目录 前言一、字符串函数二、数学函数三、总结 一、字符串函数 函数作用UPPER(列|字符串)将字符串每个字符转为大写LOWER(列|字符串)将字符串每个字符转为小写CONCAT(str1,str2,…

QSS QCalendarWidget

样式分布图&#xff1a; 知道了每个 widget 后&#xff0c;就可以像下面这样用 QSS 修改 QCalendarWidget 的样式了。 示例1&#xff1a; #qt_calendar_calendarview {background: white; }#qt_calendar_navigationbar {background: rgba(215, 215, 215, 255); }QToolButton …

功率放大器在脉冲技术中的应用

脉冲技术是指在时间上极短且能量很强的信号的处理和应用技术&#xff0c;它在通信、雷达、医学、能量研究等领域有着重要的应用。在这些应用过程中&#xff0c;功率放大器是非常重要的关键设备&#xff0c;因为它可以提供高功率脉冲信号&#xff0c;使得这些领域的应用能够顺利…

react antd动态样式实现

<Row><Col style{{ marginBottom: 30px }} ><a className"labelstyle" style{{ padding: fundType.length < 1 ? 0px : 5px, marginRight: fundType.length < 1 ? 0px : 10px }} >{fundType}</a><a className"labelstyle&q…

Gitlab 双重认证和访问令牌的使用

目录 引言 1、双重认证让项目只能使用访问令牌克隆 2、创建项目访问令牌 3、创建群组访问令牌 引言 双重认证可以提高用户账户的安全性&#xff0c;防止密码泄露&#xff0c;他人随意登录。 访问令牌就相当于项目或群组的访问密码&#xff0c;有了它就可以克隆项目。同时访…

作为一名python开发者,想要兼职接单,需要学那些技术?要达到什么水准?为什么要学这些技术?

作为一名Python开发者&#xff0c;学习并且兼职接单可以创造更多的机会和收入。要成为一名具有竞争力的兼职Python开发者&#xff0c;需要学习一系列的技术&#xff0c;并达到一定的水准。本文将详细分析兼职Python开发者需要学习的技术、所需达到的水平&#xff0c;以及为什么…

JavaScript引爆Salesforce职业生涯!抓住高薪机会

Salesforce是一款领先的CRM软件&#xff0c;已被各种规模和行业的企业使用多年。Salesforce不仅易于使用&#xff0c;而且可定制&#xff0c;使企业能够改善其销售、营销、客户服务和其他业务流程。 近年来&#xff0c;Salesforce一直在创新&#xff0c;从传统的基于Oracle的平…

电脑键盘点击记录

这里写自定义目录标题 通过敲击键盘&#xff0c;记录键盘按键&#xff0c;并记录下来&#xff0c;保存在电脑一个路径下&#xff0c;txt文档格式记录 通过敲击键盘&#xff0c;记录键盘按键&#xff0c;并记录下来&#xff0c;保存在电脑一个路径下&#xff0c;txt文档格式记录…

Vue3+VueCli+TS官方模板简析

使用脚手架安装相关依赖 使用vueCli 安装预设的vuextslessrouter ## 查看vue/cli版本&#xff0c;确保vue/cli版本在4.5.0以上 vue --version## 安装或者升级你的vue/cli npm install -g vue/cli## 创建 vue create vue3_cli_ts_htgl //create vue3_cli_ts_htgl为自…

分布式数据模型详解:OldSQL => NoSQL => NewSQL

前言 本文隶属于专栏《大数据理论体系》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见大数据理论体系 思维导图 OldSQL OldSQL 通常是在与 NoSQL 数据库相…

sap ui5 list单选列表

<Listitems"{path: }"mode"SingleSelectLeft"selectionChange""includeItemInSelection"true"><StandardListItem title""/></List>

泰迪云课堂在线实习项目介绍

在线实习项目既可以提高学生学习实践能力&#xff0c;也可以缓解学校实训培养压力&#xff0c;还可以让学生在校期间获得在线实习证明。除此之外&#xff0c;学习在线实习项目&#xff0c;学生也可以提早接触社会&#xff0c;为未来就业打好基础。 新零售|无人智能售货机…

【自由下落物体图像】物体从高空自由下落时的图像对比

自由落体两种情况分析 图像一&#xff1a;速度与时间的图像 当自由物体下落时&#xff0c;我们会得到如下的速度V和时间t的图像。 import matplotlib.pyplot as plt import math plt.rc("font",familyYouYuan) plt.rcParams[axes.unicode_minus]False # 定义常量…

【因特网】网络杂谈(3)之你真的了解因特网吗?

涉及知识点 什么是因特网&#xff0c;因特网简介&#xff0c;如何接入因特网&#xff0c;我国的因特网&#xff0c;因特网怎么接入&#xff0c;非对称数字用户环路&#xff0c;公共交换电话网&#xff0c;综合业务数字网&#xff0c;几种接入因特网的方式&#xff0c;深入了解…

2023 MWC上海展开幕:联想集团首次大规模亮相3S全栈能力

6月28日&#xff0c;亚洲最具影响力的2023上海世界移动通信大会&#xff08;2023 MWC上海&#xff09;正式开幕。联想集团作为中国主力智能解决方案服务商&#xff0c;以“全栈智能 融合成长”为主题&#xff0c;首次大规模亮相基于新IT架构的3S&#xff08;智能设备、智能基础…

通付盾发布UIAM白皮书,利用区块链、大模型AI,以及无证书分布式身份认证赋能工业互联网

简介 UIAM白皮书结合各行业与国内外IAM发展状况&#xff0c;对IAM发展历程、核心能力以及现代增强型IAM技术的演进路线进行探讨。探索身份和信息安全管理与区块链、大模型AI、无证书分布式身份认证等技术趋势&#xff0c;以及UIAM技术在工业互联网的应用。期望能够帮助企业组织…

【NOSQL数据库】Redis数据库的配置与优化

目录 一、关系型数据库与非关系型数据库1.1关系型数据库1.2非关系型数据库1.3关系型数据库与非关系型数据库的区别1.3.1数据存储方式不同1.3.2扩展方式不同1.3.3对事务性的支持不同 1.4非关系型数据库产生的背景1.5总结 二、Redis简介2.1Redis的优点2.2使用场景2.3哪些数据适合…

【FPGA】Verilog:时序电路 | 触发器电路 | 上升沿触发 | 同步置位 | 异步置位

前言&#xff1a;本章内容主要是演示Vivado下利用Verilog语言进行电路设计、仿真、综合和下载 示例&#xff1a;触发器电路 ​ 功能特性&#xff1a; 采用 Xilinx Artix-7 XC7A35T芯片 配置方式&#xff1a;USB-JTAG/SPI Flash 高达100MHz 的内部时钟速度 存储器&#xff1a;…

java图书管理系统

图书管理系统 演示视频 技术&#xff1a; 基于java图书管理系统系统的设计与实现 运行环境&#xff1a; JAVA版本&#xff1a;JDK1.8 IDE类型&#xff1a;IDEA、Eclipse都可运行 数据库类型&#xff1a;MySql&#xff08;8.x版本都可&#xff09; 硬件环境&#xff1a;Window…