- 博客(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
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人