element 开发常见问题

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

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

<el-table ref="table" :data="tableList">
 <el-table-column label="备注" align="center" prop="remark" min-width="140" >
   <template slot-scope="scope">
     <el-popover
         placement="bottom"
         trigger="hover"
         v-if="scope.row.remarkPopShow"
         popper-class="table-ellipsis-popover dark"
         :content="scope.row.remark">
       <div class="table-cell-ellipsis" slot="reference" @mouseenter="popoverShow(scope.row.id,'remark')" :ref="scope.row.id+'remark'">{{scope.row.remark}}</div>
     </el-popover>
     <div class="table-cell-ellipsis" v-else  @mouseenter="popoverShow(scope.row.id,'remark')" :ref="scope.row.id+'remark'">{{scope.row.remark}}</div>
   </template>
 </el-table-column>
 <el-table-column label="操作" fixed="right">
   ...
 </el-table-column>
</el-table>

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

<el-table ref="table" :data="tableList">
    <el-table-column label="备注" align="center" prop="remark" min-width="140" >
        <template slot-scope="scope">
          <el-popover
              placement="bottom"
              trigger="hover"
              v-model="scope.row.remarkPopShow"
              popper-class="table-ellipsis-popover dark"
              @show="popoverShow(scope.row.id,'remark')"
              :content="scope.row.remark">
            <div class="table-cell-ellipsis" slot="reference" :ref="scope.row.id+'remark'">{{scope.row.remark}}</div>
          </el-popover>
        </template>
    </el-table-column>
</el-table>

//方法
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}
  }
}

• 直接抽离成公共组件

<template>
    <div>
        <el-popover
            placement="bottom"
            trigger="hover"
            v-if="row[prop+'PopShow']" 
            popper-class="table-ellipsis-popover dark"
            :content="row[prop]">
            <div class="table-cell-ellipsis" slot="reference" @mouseenter="popoverShow(row[refId],prop)" :ref="row[refId]+prop">{{row[prop]}}</div>
        </el-popover>
        <div class="table-cell-ellipsis" v-else @mouseenter="popoverShow(row[refId],prop)" :ref="row[refId]+prop">{{row[prop]}}</div>
    </div>
</template>
<script>
export default {
    data(){
        return{

        }
    },
    props:{
        tableList:{
            type:Array,
            default:[]
        },
        row:{
            type:Object,
            default:{}
        },
        prop:{
            type:String,
        },
        refId:{
            type:String,
        }
    },
    methods: {
        popoverShow(id,key){
            var cell=this.$refs[id+key]
            if(cell.scrollWidth>cell.offsetWidth){
                this.tableList.map( m => { id===m[this.refId]?m[key+'PopShow'] = true:m[key+'PopShow']=false; return m })
            }else{
                this.tableList.map( m => { m[key+'PopShow']=false; return m })
            }
        },
    },
}
</script>

//页面引用组件
<el-table ref="table" :data="tableList">
  <el-table-column label="备注" align="center" prop="remark" min-width="140" >
    <template slot-scope="scope">
       <table-cell-ellipsis :tableList="tableList" prop="remark" refId="id" :row="scope.row"></table-cell-ellipsis>
    </template>
  </el-table-column>
  <el-table-column label="操作" fixed="right">
    ...
  </el-table-column>
</el-table>


//页面方法
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 node-sass@4.14.1

3. message 控制只显示多个

<style >
.el-message {
  top: 20px !important;
}
.el-message:not(:last-child) {
  visibility: hidden;
}
</style>

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

<el-radio-group v-model="form.val" @change="$forceUpdate()">
  <el-radio v-for="item in options" :key="item.value" :label="item.value">{{item.name}}</el-radio>
</el-radio-group>