elementUI , echarts问题总结
1.如何在elementUI的input后面添加单位符号
<i slot="suffix" style="font-style:normal;margin-right: 10px;">℃</i>
2.如何在echarts柱状图上显示数值
在需要显示数值的series里添加：
label: { show: true, position: 'inside', color:'black' },
3.elementUI中多级联cascader选择器默认选中怎么设置
注意：v-model绑定的值一定要是一个数组，数组中需要根据指向默认选中的value进行排序
比如上层目录的value为“1”，选中的值value为“22”，则为['1','22']
<el-cascader expand-trigger="hover" :props="defaultProps" :options="options" v-model="selectedOptions" // 这个绑定的值就是默认显示的值 @change="handleChange"> </el-cascader>
4.在el-dialog中使用echarts
this.$nextTick(() => { // 执行echarts方法 this.initEcharts() })
5.获取点击el-tree节点的值
HTML部分：
<el-tree ref="tree" :data="treeData" :props="defaultProps" default-expand-all :filter-node-method="filterNode" accordion @node-click="handleClick"> </el-tree>
JS部分：
handleClick(v){
console.log(v);
},
6.elementUI在组件内加上scoped之后样式乱掉并且无法修改
方法1：去掉scoped（这个不推荐，会造成样式污染）
方法2：样式放到app.vue里面 或者入口文件 index.vue ，为了不污染其他页面样式，可单独加个类名
方法3：重新写一份css文件，使用@import引入，组件内写两个分开的style即可
方法4：穿透，使用>>>或者/deep/进行样式穿透
7.elementUI获取点击行的数据
HTML部分
<el-table v-loading="loading" :data="setList" border ref="multipleTable " style="width: 90%" class="tableBox" highlight-current-row @row-click="getDetails" @selection-change="handleSelectChangeLeft" >
JS部分：
getDetails(row) {
console.log(row);
}
8.如何让el-table变成宽度自适应随浏览器伸缩
这个地方有个坑，就是当tablebox的width设置为不是100%的时候，就会发生table border无法对齐，我暂时还没找到解决方法
.el-table__body, .el-table__footer, .el-table__header{ table-layout: auto; } .el-table__header-wrapper table,.el-table__body-wrapper table{ width: 100% !important; }
9.scss添加deep报错，添加>>>无效
将 /deep/ 改为 ::v-deep
10.echarts随页面缩放
var myChart= echarts.init(document.getElementById("my_charts")); myChart.setOption(option); window.onresize = function () { myChart.resize(); myChart2.resize();//可多写 }
11.echarts+el-dialog+window.onresize() 只执行一次的问题解决方式
原博地址：https://www.cnblogs.com/goloving/p/9008165.html
window.addEventListener("resize", () => {
Chart2.resize();
Chart.resize();
});
12.动态插入el-tabel 中的label
<el-table-column :label="地址" :render-header="renderHeader"></el-table-column>
V<sup>f</sup>//v的f平方
methods: { renderHeader(h) { return ( <div>
V<sup>f</sup>
</div> ) } }
13.关于elementUI中el-table切换时错位问题
去掉错位单元格的fixed属性
14.elementUI el-table纵向求和
<el-table v-loading="loading" :data="standardList" @sort-change='sortChange' :summary-method="getSummaries" show-summary @selectionchange="handleSelectionChange">
methods：
getSummaries(param) { const { columns, data } = param const sums = [] columns.forEach((column, index) => { if (index === 0) { sums[index] = '合计' } // index >= 3 || index <= 11 是你需要计算的列 // 当然也可以指定一个或者多个列 // index === 2 || index === 3 这样值求和第二个与第三个列 else if (index >= 3 && index <= 11) { const values = data.map(item => Number(item[column.property])) if (!values.every(value => isNaN(value))) { sums[index] = values.reduce((prev, curr) => { const value = Number(curr) if (!isNaN(value)) { // 保存了两位小数点 return Math.floor((prev + curr) * 100) / 100; } else { // 保存了两位小数点 return Math.floor(prev * 100) / 100; } }, 0) } else { sums[index] = 'N/A' } } else { sums[index] = '' } }) return sums },
15.echarts如何实现横向纵向滚动？
在option加入以下代码即可
dataZoom:[ {type: 'slider', show: true, yAxisIndex: [0], left: '93%', start: 0, //数据窗口范围的起始百分比 end:6 },{ type: 'inside', yAxisIndex: [0], start: 0, end:6}, {type: 'slider',//图表下方的伸缩条 show : true, //是否显示 realtime : true, //拖动时，是否实时更新系列的视图 start : 0, //伸缩条开始位置（1-100），可以随时更改 end : 100, //伸缩条结束位置（1-100），可以随时更改 }],
16.elementUI的日期选择器日期自动减去一天的问题
原因1：时区问题
原因2：时间格式问题
如果时间处理后格式为yyyy.MM.dd的话需要在选择器里加上
value-format="yyyy.MM.dd"
同理如果时间处理后格式为yyyy-MM-dd的话需要在选择器里加上
value-format="yyyy-MM-dd"
17.遮罩层的点透问题
.cover{ position: fixed; width: 100%; height: 110%; z-index:999; //给遮罩层上添加这个属性即可，这是就可以穿透遮罩层，触发到确认按钮了 pointer-events：none; }
18.iframe的自动跳转功能怎么关闭
if (top.location != self.location) {top.location=self.location;}
使用里这段代码之后，会自动判断当前的location是否是顶层的，即是否被嵌套到iframe里面了，如果是，则强制跳转。
1.添加<iframe src="XXX.com" scrolling="no" security="restricted" sandbox="">
2.删掉上述代码
持续更新....
