文章目录

• • • 1、Mac上SourceTree更新已删除的远端分支和tag
    • 2、echarts x轴文字显示不全（解决方案）
    • 3、如何渲染多行多列的表格（非固定的行数和列数）
    • 4、umy-ui标题过长或内容过长时的处理
    • 5、dateRange的时间选择只能选择一个周
    • 6、如何将对象数组中的某一个属性提取出来成为一个新的对象数组？
    • 7、报错解决：[Vue warn]: Error in nextTick: "NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node."

1、Mac上SourceTree更新已删除的远端分支和tag

问题背景：
在远端删除分支或tag之后，SourceTree上的远端分支列表和tag不会更新，这样会导致tag越来越多，要进行同步更新，进行以下操作即可：
1、获取git的安装路径，终端输入：

which git

2、打开SourceTree，偏好设置->自定义操作->添加

3、在下图片中1的位置输入git的安装路径，2的位置输入：

fetch origin --prune --prune-tags

4、动作->自定义操作->执行
5、重启SourceTree，发现多余的分支tag已经不存在了

2、echarts x轴文字显示不全（解决方案）

echarts有的时候遇到x轴标签过长的情况，会导致显示不全。

option = {xAxis: {type: 'category',data: ['有一点长的标签','有一点点长的标签','有一点点点长的标签','有一点点点点长的标签','有一点点点点点长的标签','有一点点点点点点长的标签','有一点点点点点点点长的标签',]},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]
};

解决方案：
1、文字旋转45度

option = {grid: {bottom: 150},xAxis: {type: 'category',data: ['有一点长的标签','有一点点长的标签','有一点点点长的标签','有一点点点点长的标签','有一点点点点点长的标签','有一点点点点点点长的标签','有一点点点点点点点长的标签'],axisLabel: {//旋转角度rotate: 45}},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]
};

2、文字换行

option = {grid: {bottom: 150},xAxis: {type: 'category',data: ['有一点长的标签','有一点点长的标签','有一点点点长的标签','有一点点点点长的标签','有一点点点点点长的标签','有一点点点点点点长的标签','有一点点点点点点点长的标签'],axisLabel: {formatter: val =>{//一行字数const max = 4// 标签长度const valLength = val.length// 换行数const rowNum = valLength /4if(valLength > 1){let target = ''for(let i = 0;i < rowNum; i++){const start = i*maxconst end = start + maxtarget += val.substring(start, end)+'\n'}return target}else{return val}}}},yAxis: {type: 'value'},series: [{data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',smooth: true}]
};

3、如何渲染多行多列的表格（非固定的行数和列数）

有这样一个需求，在前端的详情中展示非固定行数和列数的数据（行数和列数都较多），并且表格的表头也是不固定的，如下图，如何展示？

解决：
对于表格数据较多的情况一般不推荐使用el-table，容易造成页面卡顿。使用umy-ui中的表格

展示结果：

返回的res数据的基本格式为：

details: {8.2: [{0: "",1: "天津电网-售",2: "天津电网-售",3: "河北电网-售",4: "河北电网-售",5: "山西电网-售",6: "山西电网-售",7: "辽宁电网-售",8: "辽宁电网-售",9: "吉林电网-售",10: "吉林电网-售",11: "黑龙江电网-售",12: "黑龙江电网-售",},{0: "时间",1: "出清电量（日前）",2: "出清电价（日前）",3: "出清电量（日前）",4: "出清电价（日前）",5: "出清电量（日前）",6: "出清电价（日前）",7: "出清电量（日前）",8: "出清电价（日前）",9: "出清电量（日前）",10: "出清电价（日前）",11: "出清电量（日前）",12: "出清电价（日前）",},{0: "0:15",1: "0.00 ",2: "0.00 ",3: "391.50 ",4: "142.47  ",5: "391.50 ",6: "142.47  ",7: "391.50 ",8: "142.47  ",9: "391.50 ",10: "142.47  ",11: "391.50 ",12: "142.47  ",},{0: "0:30",1: "0.00 ",2: "0.00 ",3: "391.50 ",4: "142.47  ",5: "391.50 ",6: "142.47  ",7: "391.50 ",8: "142.47  ",9: "391.50 ",10: "142.47  ",11: "391.50 ",12: "142.47  ",},],8.3: [{0: "",1: "天津电网-售",2: "天津电网-售",3: "河北电网-售",4: "河北电网-售",5: "山西电网-售",6: "山西电网-售",7: "辽宁电网-售",8: "辽宁电网-售",9: "吉林电网-售",10: "吉林电网-售",11: "黑龙江电网-售",12: "黑龙江电网-售",},{0: "时间",1: "出清电量（日前）",2: "出清电价（日前）",3: "出清电量（日前）",4: "出清电价（日前）",5: "出清电量（日前）",6: "出清电价（日前）",7: "出清电量（日前）",8: "出清电价（日前）",9: "出清电量（日前）",10: "出清电价（日前）",11: "出清电量（日前）",12: "出清电价（日前）",},{0: "0:15",1: "0.00 ",2: "0.00 ",3: "391.50 ",4: "142.47  ",5: "391.50 ",6: "142.47  ",7: "391.50 ",8: "142.47  ",9: "391.50 ",10: "142.47  ",11: "391.50 ",12: "142.47  ",},{0: "0:30",1: "0.00 ",2: "0.00 ",3: "391.50 ",4: "142.47  ",5: "391.50 ",6: "142.47  ",7: "391.50 ",8: "142.47  ",9: "391.50 ",10: "142.47  ",11: "391.50 ",12: "142.47  ",},{0: "0:45",1: "0.00 ",2: "0.00 ",3: "391.50 ",4: "142.47  ",5: "391.50 ",6: "142.47  ",7: "391.50 ",8: "142.47  ",9: "391.50 ",10: "142.47  ",11: "391.50 ",12: "142.47  ",},{0: "1:00",1: "0.00 ",2: "0.00 ",3: "391.50 ",4: "142.47  ",5: "391.50 ",6: "142.47  ",7: "391.50 ",8: "142.47  ",9: "391.50 ",10: "142.47  ",11: "391.50 ",12: "142.47  ",},],},

4、umy-ui标题过长或内容过长时的处理

show-header-overflow // 标题过长，是否显示省略号 头部过长的时候展示省略号 悬浮展示标题
show-overflow // 内容过长时显示为省略号

5、dateRange的时间选择只能选择一个周

项目场景：
给后端传日期数据时要求传递的只有七天，也就是说需要限制选择，当选择了一个日期之后，就只能选择它前七天或者后七天的。

//相关界面上代码
//data中进行定义
pickerOptions:null
//可以在相关方法中执行
this.pickerOptions = {onPick(time) {// 如果选择了只选择了一个时间if (!time.maxDate) {let timeRange = 6 * 24 * 60 * 60 * 1000; // 7天_minTime = time.minDate.getTime() - timeRange; // 最小时间_maxTime = time.minDate.getTime() + timeRange; // 最大时间// 如果选了两个时间，那就清空本次范围判断数据，以备重选} else {_minTime = _maxTime = null;}},//将七天前和七天后的日期设置成可选择的日期，其余的日期均为不可选择disabledDate(time) {// onPick后触发if (_minTime && _maxTime) {return time.getTime() != _minTime && time.getTime() != _maxTime;} else {return false;}},};

6、如何将对象数组中的某一个属性提取出来成为一个新的对象数组？

从 [{ name: ‘小王’, age: ‘12’ }, { name: ‘小李’, age: ‘13’ },{ name: ‘小张’, age: ‘14’ }];到[{age: ‘12’ }, {age: ‘13’ },{ age: ‘14’ }]该如何处理？

let oldArr =[{ name: '小王', age: '12' },{ name: '小李', age: '13' },{ name: '小张', age: '14' }];
let newArr = oldArr.map((item,index)=>{return Object.assign({},{age: item.age})
});//newArr即为所需的

7、报错解决：[Vue warn]: Error in nextTick: “NotFoundError: Failed to execute ‘insertBefore’ on ‘Node’: The node before which the new node is to be inserted is not a child of this node.”

原因：
这是由于在最外层的template上面加了v-if导致的报错
解决：
在最外层加上一层空的div 上面不要写v-if条件渲染