elementUI , echarts问题总结

Posted 2020-12-20 wangziwei

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

 

待更新....