element 开发常见问题

1. el-table 列中使用el-popover代替show-overflow-tooltip（由于show-overflow-tooltip中的内容不能复制）

• 写法一（有没有列设置fixed属性都可用写法一）

 
   
 
 
   ...
 

• 写法二（如果没有列设置fixed属性可直接写法二）

//方法
methods: {
    popoverShow(id,key){
      var cell=this.$refs[id+key]
      if(cell.scrollWidth>cell.clientWidth){
        this.tableList.map( m => { id==m.id?m[key+'PopShow'] = true:m[key+'Show']=false; return m })
      }else{
        this.tableList.map( m => { m[key+'PopShow']=false; return m })
      }
    },

    getList() {
      getlist(this.queryParams).then((response) => {
        var tableList= response.rows;
        this.tableList=tableList.map(m=>{m.remarkPopShow=false;return m})
      });
    },
}

//全局css
// table某列内容文字过长省略号及详细浮层样式
.table-cell-ellipsis{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.el-popper.table-ellipsis-popover{max-width: 300px;
  font-size: 12px;padding:10px 15px;
  &[x-placement^=top]{margin-bottom:20px;}
  &[x-placement^=bottom]{margin-top:20px;}
  &.dark{
    background: #303133;
    color:#fff;
    border:none;
    box-shadow:none;
    &[x-placement^=top] .popper__arrow::after{border-top-color:#303133}
    &[x-placement^=bottom] .popper__arrow::after{border-bottom-color:#303133}
  }
}

• 直接抽离成公共组件

//页面引用组件

  
    
  
  
    ...
  



//页面方法
methods: {
    getList() {
      getlist(this.queryParams).then((response) => {
        var tableList= response.rows;
        this.tableCellEllipsisInit(tableList)
      });
    },
    tableCellEllipsisInit(tableList){
        var needEllipsisPop=['remark']
        this.tableList=tableList.map(m=>{
          needEllipsisPop.map(item=>{
            m[item+'PopShow']=false
          })
          return m
        })
    },
}

2. rouyi打包后线上环境图标乱码

卸载dart-sass
npm uninstall sass
安装node-sass 4.14.1版本
npm install [email protected]

3. message 控制只显示多个

4. el-radio-group 点击选不中加上 @change="$forceUpdate()"

  {{item.name}}