鲸鱼前端大师-CSDN博客

原创 Vue 中 element-ui table 结合后端请求实现排序

一.需求需要对指定列，结合后端请求进行排序二.知识点2.1 如果需要结合后端请求排序，将需要排序的列上设置sortable为custom2.2 同时在el-table标签上监听sort-change事件，在事件回调中可以获取当前排序列的字段名和排序顺序，从而将这些作为发起接口请求的入参2.3 sort-change方法自带三个参数，分别为：column：当前列prop：当前列需要排序的字段名order：排序的规则（升序、降序和默认，默认就是没排序）三.代码和注释如下 <el-tab

2022-04-26 15:56:29 7263 1

原创 element ui 制作带自定义的快捷选项的日期选择器

一.需求1.1 需要在日期选择器上设置快捷选项，快捷选项需要有今天、昨天、近7天、近30天、近90天、近180天、近一年、本周、本月、本季度、本年这些选项1.2 这些快捷键需要的是相对时间的概念；而且得按照产品要求的来自定义快捷选项具体的内容；如：产品定义的近7天即，当天-7天到当天-1天，依次类推；本周即，当天对应的这周的周一到当天-1；本月即，当天对应的这个月的第一天到当天-1；本季度即，当天对应的这个季度第一个月的第一天到当天-1二.效果三.代码和注释如下3.1给日期选

2022-04-24 18:06:00 4601 2

原创 echarts堆叠柱状图中显示百分比，tooltip展示百分比和数量

一.需求1.后端返回的是堆叠图的每个类型的数量组成的数组，需要计算出每一个横向柱状里每个类型占的百分比，然后显示2.点击某个柱状时，弹窗tooltip里要展示这个柱状中每个类型的百分比和数量二.效果图注意：图片里由于有些数据是0，所有呈现时重叠了三.代码如下 <div id="main" style="width:100%"></div> //要给echarts容器一个宽度或者高度,要不然echarts不会展示 drawChart(){ //渲染echart

2022-04-21 14:35:31 13875

原创 vue中循环生成多个相同的echarts图表，但数据动态

一.需求需要循环展示多个相同结构样式的echarts，但是每个数据不同，需要根据后端统一返回的数据去填充图表的数据内容二.效果三.代码和注释如下 <div v-for="(item,index) in indexList" :key="item.id"> <div class="main3" style="height:360px;"></div> //模板里先定义个div盒子，放echarts,这里必须有设置宽或者高，要不然echarts不会

2022-04-20 17:16:36 6649 5

原创 js 锚点定位的2种简单方法

一.解决方案第一种方案：传统的锚点定位但是这个方案有一个弊端，就是会影响url 的hash<div id="anchor">跳到这里来</div>//html中定义一个锚点，这里可以用name或者id,即锚点的目的地<a href="#anchor">点击这</a>//这是锚点的入口，点击这，锚点激活，href属性绑定你想跳到的位置的div盒子的id或者name第二种方案：使用scrollIntoView方法进行定位到某一位置<div

2022-04-20 16:33:47 22183 2

原创 echarts横向柱状图高度随动态数据长度自适应

一.需求echarts横向柱状图的容器高度，随后端返回的动态数据的长度自适应，瀑布流式展示二.分析难点：echarts的容器高度若是写死的话，后端返回数据过多时，则呈现的效果是容器高度不变，内容会被压缩的很小，但是会展示全；如果不给容器高度设置高度的话，他会默认一个高度，后端返回数据过多时，则呈现的效果是容器高度为默认高度，内容展示不全，容器装不下的剩下的内容会被遮挡看不见三.关键性代码和注释如下 let myChart = this.$echarts.init(document.get

2022-04-20 14:58:08 4411 2

原创 echarts图表渲染后四周留有大量空白区域解决

一.问题echarts图表渲染后，四周还留有大量的空白区域，并没有铺满二.代码和注释如下参考 echarts 配置项属性：grid其中 grid 有四个属性值： top , right , bottom , left 分别控制 canvas 距离容器四周的距离 var option2={ grid: { left: '3%', //默认10% right: '4%', //默认10% bottom: '8%', //默认60

2022-04-20 14:15:23 4308

原创 flex布局之5个div盒子一排，不同屏幕，盒子宽度自适应

一.需求不同大小的屏幕进入页面，都是一排5个div盒子，且div盒子宽度随屏幕自适应二.效果三.代码和注释如下<el-row class="indexListBoxRow"> <el-col class="indexList_box" v-for="(item,index) in indexList" :key="item.id" //循环展示盒子 :class="{ lastLine: (index + 1) % 5 == 0

2022-04-20 11:08:49 5446

原创 js处理保留2位小数，整数不补零，且数值过万处理

一.需求数值展示，若为整数，展示不带两位小数；若有小数，则保留两位小数；超过位数，用万表示二.代码和注释如下2.1 用插值表达式展示数值2.2 用js的三元表达式，若后端返回的数据是null，则展示为" "，若不是null，则展示处理过后的数据2.3 toFixed（2）即取2位小数，由于toFixed只能针对数字类型才能使用，所以对于字符类型的要用parseFloat函数先转一下再调用，否则会报错2.4 用局部过滤器million这个函数，来进行数值过万处理，即当位数超过5位，在数据后

2022-04-19 17:01:52 1843

原创 el-date-picker设置默认时间区间

一.需求需要一进页面时，把日期选择器，默认展示为2012-01-01至当前日期-1天即图：二.代码和注释如下：1.1<el-form-item label="时间周期：" prop="timeCycle" > <el-date-picker v-model="createForm.timeCycle" type="datetimerange" :picker-options="pickerOptions" //

2022-04-19 16:16:44 12084

原创 el-table-column悬浮时展示自定义内容，且el-popover的样式修改

一.需求要求列表某一列展示后端返回的对应字段，悬浮时展示另一个字段内容二.代码和注释如下<el-table-column prop="customerRealName" //列表这一列展示customerRealName这个对应字段的内容 label="需求人" min-width="8%" sortable='custom' show-overflow-tooltip > <template slot-

2022-04-19 15:36:57 3496 1

原创 vue中el-table翻页序号连续

一.需求：需要在el-table中有一列是序号，且翻页时，序号要连续，且删除当前行时，序号需要从后往前递补；且这个序号不是通过后端返回的数组中取到的对应字段，需要纯前端处理二.解决方案方案一：这个方法有个弊端，就是自定义这一列的宽度会失效 <el-table-column type="index" //e-table有这个属性，可以获取到当前行的下标 label="序号" :index="table_index"//可以自定义下标，接受table_in

2022-04-18 18:14:58 2816

原创 echarts设置饼状图的标示线以及标示文字的颜色等相关样式

一.代码和注释如下：var option ={ series: [ { name: 'KR完成比例', type: 'pie',//类型为饼图 radius: ['30%', '50%'],//饼图的半径，一般写一个，若写成有2个半径的数组，则变成了环形图 label: { formatter: '{per|{d}%} {ng|{c}}',

2022-04-12 12:07:27 13726 4

原创 echarts如何设置y轴颜色以及y轴的内容文字颜色

一.代码和注释如下var option={ yAxis: { type: 'category',//设置类型为类目轴，适用于离散的类目数据，可自动从series.data或者dataset.source中取，或者可通过yAxis.data设置类目数据，若不设置类型，默认是type:value data: ['部门一'，'部门二'，'部门三'],//y轴内容 axisLabel: {//y轴文字的配置 textStyle:

2022-04-12 11:31:11 14092 3

原创 echarts中如何配置图例形状、图标宽高、图标和文字间距、图例位置、文字颜色、字体大小

1.代码和注释如下var option ={ legend: { bottom: '5%',//图例距离整个容器底部的距离 left: 'center',//图例距离整个容器左边 data: ['完成', '较好', '一般', '较差', '无进展'],//图例文字内容 icon: "circle",//设置图例图标的形状为实心圆，这个不填，默认是矩形 itemHeight: 9,//图例

2022-04-12 11:00:11 10885 5

原创 echarts点击图例 legend，取消默认点击事件，不让图发生变化

一.知识点echarts不管是柱状图还是饼状图等其他图都有图例legend，点击图例legend时，会触发默认的点击事件，使得图随之发生变化例如：这是未操作时的环形图：当你点击图例完成后，图会随之改变成去掉完成部分的统计图，当你再次点击图例完成，图又恢复成原样解决方法如果想echarts点击图例 legend，取消默认点击事件，不让图发生变化，则需要在option配置项中添加legend的配置selectedMode:false即可var option ={ leg

2022-04-11 14:37:57 10772 1

原创 Vue项目打包部署到Tomcat

一. 思路使用 npm run build命令打包完成之后，会出现一个dist文件夹，里面有static文件夹和一个index.html文件，如果我们要部署在tomcat上面，即需要将dist文件放在tomcat里的webapps文件夹下，再用docker执行下重启指令，然后在本地起的vue项目就可以通过链接外部访问了。别人访问你本地的vue项目就不需要通过你的ip地址，在同一网段下才能访问了。二. 步骤1.在vue项目的vue.config.js文件中module.exports导出的对象中添加 p

2021-09-10 11:00:36 8134

weixin_54351962的博客