Element ui /Earchs 日常开发遇到问题

640 阅读2分钟

1.遇到IE 浏览器显示(后台数据!!!非实时时间)的时候为时间数据NAN NAN NAN

formatter 属性

         <el-table-column
        prop="orginfoCreationtime"
        :formatter="formatterDate"
        label="创建日期"
        align="center">
        </el-table-column>

substr() 截取需要显示的字段

formatterDate(row, column, cellvalue) {
      // let date = new Date(cellvalue);
      // let y = date.getFullYear();
      // let m =
      //   date.getMonth() > 8 ? date.getMonth() + 1 : "0" + (date.getMonth() + 1);
      // let d = date.getDate() > 9 ? date.getDate() : "0" + date.getDate();
      // return y + "-" + m + "-" + d;
      return cellvalue ? cellvalue.substr(0,10) : '/'
    },

解决 “element分页:删除最后一页的所有数据后,currentPage显示正确,但列表内容为空” 的问题

1.最后一页只有一条数据,删除操作之前如图所示:

1.png

2.删除之后的现象,如图

2.png

3.在执行完删除操作之后请求了新的数据列表,请求参数如下图

3.png

咦?我怎么传的是11呢?不应该传10吗?so…删除后得想办法及时更新掉page的值,再去请求列表数据

删除成功之后重置currentPage

4.png 代码解释

             //    this.totalPage : 总数据条数
            //    this.pagesize: 每页多少条数据
            //    this.currentPage: 当前页码(当前是哪一页)

Earchs 图表 tepy:tree 树图

树形图名称过长需要隐藏时,如图:

5.png

测试上线,,,,改bug.... 哇,改需求呗。。话不多说上代码,先看图改进后:

6.png

添加formatter 属性,详情见earchs 官网api

Earchs 旧版官网https://echarts.apache.org/v4/zh/index.html

Earchs 新版官网https://echarts.apache.org/zh/index.html

代码如下: 代码位置 //添加//

 this.tree_charts = echarts.init(this.$refs.treeChart);
      let option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
          ////上面文字换行
           extraCssText: "width:200px;white-space:pre-wrap;text-align:center;",
          ////添加
          formatter: (obj) => {
            return obj.name
          }
          ///添加
        },
        series: [
          {
            type: "tree",
            initialTreeDepth: -1,
            data: this.treesData,
            expandAndCollapse: false,
            top: "1%",
            left: "10%",
            bottom: "1%",
            right: "10%",
            symbol: "rect",
            symbolSize: [180, 30],

            label: {
              normal: {
                // position: "left",
                // verticalAlign: "middle",
                // align: "right",
                // color: "black"
                position: "right",
                verticalAlign: "middle",
                fontSize: 12,
                offset: [-175, 0], // 文本偏移量
                color: "#00173d",
                align: "left",
                ////添加
                formatter: (obj) => {
                  return obj.name.length > 15 ? obj.name.substr(0,15) + '...' : obj.name
                }
                ///添加
              }
            }
          }
        ]

不想用element ui 卡片的时

///div 样式添加后显示如卡片效果
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)

element ui 样式无法修改的时候 样式穿透也无法起到作用

element提供的默认的样式不能满足项目的需要,就需要我们队标签的样式进行修改,但是发现修改的样式不起作用

<style lang="less" scope>
/deep/ .el-dialog__header{
  background-color: white;
  .el-dialog__title{
    color: #000;
    position:relative;
    padding-left:16px;
    margin-right:20px;
    margin-bottom:20px;
    &:before{
      position:absolute;
      left:0;
      top:0;
      content:"";
      width:5px;
      height:24px;
      background:#409EFF;
    }
  }
  .el-dialog__headerbtn{
    .el-dialog__close{
        color: #000;
    } 
    
  }
}
 
    
 }
</style>

这样还是无法修改 原因原因:scoped 解决方法:去掉scoped

注意:此时该样式会污染全局样式,可以把它放在公共的css里面

为了不让所有的 el-input标签都是该样式,可以给改div加上一个类名,比如 title

2.png

这样就可以进行样式修改了,

弹出框 左边文字竖线样式

.el-dialog__title{
    color: #000;
    position:relative;
    padding-left:16px;
    margin-right:20px;
    margin-bottom:20px;
    &:before{
      position:absolute;
      left:0;
      top:0;
      content:"";
      width:5px;
      height:24px;
      background:#409EFF;
    }
  }

3.png

tab 每列数据------求差

微信图片_20210722152602.png ----日常开发问题---