elementUI , echarts问题总结

技术文章 1年前 (2020) 完美者
1,580 0

标签:问题   let   over   load   str   margin   rop   trigger   问题总结   

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);
    }

 

待更新....

 

elementUI , echarts问题总结

标签:问题   let   over   load   str   margin   rop   trigger   问题总结   

原文地址:https://www.cnblogs.com/wangziwei/p/13895962.html

版权声明:完美者 发表于 2020-10-30 11:44:30。
转载请注明:elementUI , echarts问题总结 | 完美导航

暂无评论

暂无评论...