View UI (iview)
文章平均质量分 60
huangfuyk
自己应为之事,勿求他人;今日应为之事,勿待明日。
展开
-
Vue、JS点击元素,该位置出现弹出框,且可跟鼠标滚动而移动
在平时开发当中,可能会遇到这样的需求:我在某一特定位置点击元素,当前点击位置出现弹出框,且弹出框可跟随鼠标滚动而移动。例如当我点击下图“眼睛”图标时,要在点击位置弹出一个框,显示点击的该条数据内容。并且当我滚动鼠标时,该弹出框会随着“眼睛”一起移动,相对位置不变。如下图所示:(1)首先给弹出框绑定一个动态top以及left值代码如下:<span:style="{ top: showPositionTop + 'px', left: showPositionLeft + 'px' }".原创 2021-05-27 11:23:38 · 4505 阅读 · 3 评论 -
iview(View UI)使用 Vue 的 Render 函数,自定义表格列头显示内容(renderHeader)
开发中遇到这样一个需求,该项目用的是iview UI组件,需求是:表格列头有一个字段和一个单位,两者样式不同,理想效果如下:“建筑面积四个字为18px、单位(㎡)为16px”。如果按照iview—table表格默认的title属性赋值,那这个字段以及单位的样式就会一样,均为18px。如下图:这时候打开iview官网看到这样一个属性:renderHeader。官方是这样定义的:自定义列头显示内容,使用 Vue 的 Render 函数。传入两个参数,第一个是 h,第二个为对象,包含 co原创 2021-07-06 09:53:51 · 2733 阅读 · 1 评论 -
View UI (iview)表格合并单元格(行/列合并)
有时我们在开发过程中会遇到表格里有合并单元格的需求。今天以View UI (iview)组件库为例。1. 打开iview官网-table会发现有合并单元格示例:2. 但是在实际项目中,无法做到像上边代码那样通过 rowIndex和 columnIndex 在前端将合并的单元格写死,而是需要根据后台返回给前端的数据进行逻辑判断,决定合并哪些单元格。(1)比如现在有一个需求是表格的第一列“类别”中,如果有相同类别名字的进行单元格合并<template> <Table .原创 2021-05-21 14:02:53 · 4878 阅读 · 23 评论