自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(21)
  • 收藏
  • 关注

原创 tooltip 动态控制显示、隐藏

span @mouseenter="isShowTooltip"> 这里是一些可能会超出容器高度的内容</span>3、给标签设置固定宽高,且超出隐藏、单行(不换行),多行(固定行)、添加省略号。:content="这里是一些可能会超出容器高度的内容"2、用标签的 scrollWidth 和 clientWidth。需求:在标签中,内容过长,即超出标签宽度添加tooltip,否则不添加。思路: 1、利用tooltip 的disabled 的 属性动态控制。

2024-10-31 15:04:44 170

原创 el-upload上传文件修改 File 中的name

const FileParams = new FormData() //new 一个 FormData。.................... //append需要的参数。//append 修改name后的file,其中nameNew 是需要的name。方法:可以使用new File创建新文件,然后整个替换掉raw文件对象。问题:在上传文件前,强制修改 raw.File中的name,会报错。原因:因为file中的name是只读的,所以不能修改,

2024-09-04 19:46:28 347

原创 用 echarts 开发地图、点击展示自定义信息框

'详情<i class="el-icon-close closebt" id = "closeBtn"></i></div>' +color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色。color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色。backgroundColor: 'rgba(0,0,0,.6)', //提示框样式。areaColor: '#389BB7', //区域的面积颜色。'150100000000' :'呼和浩特市',

2024-08-08 17:57:58 1142

原创 腾讯地图简单功能的封装

center: new TMap.LatLng(this.center[0], this.center[1]), // 设置地图中心点坐标。zoom: 13, // 设置地图缩放级别。// 更新图层(打标)7、容器样式-一定要给父容器一个高度。5、 mounted 调用方法。// 统一处理数据结构。6、methods方法。4、 watch监听。1、准备容器-css。2、 props属性。

2024-07-10 18:14:34 361

原创 原生多选树组件封装

const checkedKeys = this.$refs.tree.getCheckedKeys(this.leafOnly) // 所有被选中的节点的 key 所组成的数组数据。const checkedKeys = this.$refs.tree.getCheckedKeys(this.leafOnly) // 所有被选中的节点的 key 所组成的数组数据。// this.$refs.tree.setCurrentKey(null) //清除树选中key。path: 'path', // 路径。

2024-06-25 15:49:45 727

原创 js实现列表上下移动数据手动排序

/ arr.splice(index2, 1, arr[index]) 这个是删除第 index2 项,并用 index1 项 代替, 此时原数组已经改变,// arr[index1] 接收到删除的数据集合,并取第一项即为 index2 数据,实现数据交换。// splice函数 返回的是被删除 项 并且 会改变原数组。

2024-06-25 14:54:10 478

原创 table表格导出excel时,同一个cell中设置不同的字体颜色

worksheet.getColumn(Number(index) + 2).width = width * 2 // 考虑到字符宽度与字符数的比例,可能需要乘以某个系数。const worksheet = workbook.addWorksheet('Sheet1') // 创建一个工作表 // 添加表头。{ text: '这是颜色', font: { color: { argb: 'FF0000' } } }, // 红色文字。{ text: '设置的文字' } // 默认颜色文字。

2024-06-24 10:57:10 449

原创 table表格动态更新数据回显不变的问题

1、使用this.$set方法进行对象的更新、数组使用push、pop、shift、unshift、splice、 sort、reverse等方法。3、给table绑定唯一的key, 如table绑定个布尔值,每次更新数据后把布尔值取反。2、在数据更新完之后执行this.$forceUpdate() 进行强制更新。可以依次尝试这三种方法进行排查。

2024-06-21 11:31:58 448

原创 npm install 报错问题 webpack@4.46.0

安装语句后添加 --legacy-peer-deps 如: npm install --legacy-peer-deps。如本地有node_modules 和 package-lock 文件,删除重新安装。

2024-06-04 16:19:28 292 1

原创 前端打印文件时,textarea 中文本不换行问题

3、解决方法:在打印前用div标签存储内容,并用<br /> 替换 \n,\r ,给div设置打印出来的样式;打印后还原<el-input >标签。1、问题:在 textarea 中,当内容换行时打印文件,文本没有换行,导致内容丢失。placeholder="只能输入2000个字符"2、原因:因为html2Canvas转化为图片时,不能识别 \n 、\r。PDF.save('导出文件' + '.pdf')css 代码 根据实际情况设置样式。4、修改后导出内容换行。

2024-05-28 13:38:47 1113

原创 ele-form 使用插槽时,树组件选择之后,校验不通过问题

/如果是封装的form (如 封装的form 的refs 是 auditForm)2、解决方法 --在选中的值后,调用form的validateField 方法进行某个字段的再次校验。//如果是在el-form 中写的插槽。1、html--给 树组件添加check事件。

2024-05-24 15:14:54 345

原创 vue-echarts 中双y轴点击legend 控制 对应的轴和name显示和隐藏

3、 给对象的轴设置显示与隐藏,其中yAxis 中通过show属性控制显示与隐藏,其中yAxis中的name和 legend 中 data 和 selected 需要设置。data: ['第一季度', '第二季度', '第三季度', '第四季度']//参数为 ‘苹果数量’-true/false '李子数量'-true/false。苹果数量: yAxis1,data: ['苹果数量', '李子数量'],name: '苹果数量',name: '苹果数量',name: '李子数量',name: '李子数量',

2024-05-23 17:30:39 1159 1

原创 vuex.store把state中的数据分别存localStorage 和 sessionStorage中

在Vuex.Store默认把数据存到localStorage中,但如果想要同时存到sessionStorage中,可以借助createPersistedState 实现功能。3、最后在控制台打开可以看到 sessionStorage 和 localStorage 中发现 vuex 对象。2、在new Vuex.Store对象中 添加 plugins 对象。1、安装createPersistedState。

2024-05-22 15:16:19 257

原创 树结构的数据筛选方法

/处理前数据dwjc: '交警大队',dwjc: '一大队'},dwjc: '二大队'},dwjc: '交警二支队'],],

2024-03-27 18:01:52 860 1

原创 项目中微信小程序、H5页面分别进行图片压缩

destHeight: canvasHeight, // 输出的图片的高度。destWidth: canvasWidth, // 输出的图片的宽度。console.log('图片压缩失败---->>>>>', err)fileType: 'png', // 图片输出格式。/** **H5 图片压缩 start ****//** ** H5图片压缩 end ****//** ** 图片压缩 start ****/// 导出图片,获取压缩后的图片路径。/** ** 图片压缩 end ****/

2024-03-27 14:47:43 1965 1

原创 echarts 饼状图 label 字体设置

/ hoverAnimation: false, // 为false 时关闭动画 且 emphasis不设置。// {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)rich: { // 在rich中可以分别给 a,b,c,d 设置样式。center: ['42%', '50%'], // 圆中心位置。radius: ['40%', '70%'], // 圆半径。icon: 'circle', // icon 形状。labelLine: { // 引导线。

2024-03-20 17:55:49 1841 1

原创 table表格多级表头且可编辑

实现方式:在el-table中利用for循环根据返回的数据,渲染多级表头,然后在el-table-column标签中使用插槽slot="header" 自定义头部样式,使用插槽 slot-scope="scope" 自定义cell。item.disabled" v-model="scope.row[item.prop]" class="item" placeholder="请输入内容" />'label': '人口数','label': '排名','label': '排名',sjdwjc: '浙江省',

2024-03-19 15:53:57 993 1

原创 echarts ---柱状图多个柱子时,设置legend不显示、图形大小随窗口变动

data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']data: ['2024年', '2023年', '2022年'] //多条柱子时此属性一定要设置,对应series中那么,否者不显示图例。top: '18%', // 设置图表在容器中的位置。left: '2%', //图例位置。name: '2024年',name: '2023年',name: '2022年',

2024-03-19 14:52:44 1880

原创 vue页面打印成图片文件

在后台管理项目中,想要把页面打印成图片文件,可以使用print-js和。

2024-03-13 21:40:55 639

原创 vue页面导出为pdf文件

在后台管理项目中,想到把页面导出为pdf格式的文件,可以使用html2canvas和jspdf 插件实现。

2024-03-13 21:30:14 2241

原创 table多级表头表格原样式导出excel

html代码<el-table// 导出。

2024-03-12 20:23:12 609

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除