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=" 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.删掉上述代码

持续更新....