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

• 写法三 直接抽离成公共组件

<template>
  <div>
    <el-popover :key="offsetWidth" placement="bottom" trigger="hover" v-if="row[prop + 'PopShow']" :width="widthNew" popper-class="dc-table-ellipsis-popover dark">
      <el-scrollbar style="height: 100%">
        <div style="max-height: 400px; padding-right: 15px">
          {{ row[prop] }}
        </div>
      </el-scrollbar>
      <div class="dc-table-cell-ellipsis" slot="reference" @mouseenter="popoverShow(row[refId], prop)" :ref="row[refId] + prop">{{ row[prop] }}</div>
    </el-popover>
    <div class="dc-table-cell-ellipsis" v-else @mouseenter="popoverShow(row[refId], prop)" :ref="row[refId] + prop">{{ row[prop] }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      offsetWidth:0
    }
  },
  props: {
    width: {
      type: [String, Number]
    },
    tableList: {
      type: Array,
      default: []
    },
    row: {
      type: Object,
      default: {}
    },
    prop: {
      type: String
    },
    refId: {
      type: String
    }
  },
  watch:{
    tableList:{
      handler(n){
        n.map(m => {
          if(m[this.prop + 'PopShow']===undefined){
            this.$set(m,this.prop + 'PopShow',false)
          }
          return m
        })
      },
      immediate:true
    }
  },
  computed:{
    widthNew(){
      return this.width?this.width:this.offsetWidth
    }
  },
  methods: {
    popoverShow(id, key) {
      const cell = this.$refs[id + key]
      this.offsetWidth=cell.offsetWidth
      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>
<style scoped >
.dc-table-cell-ellipsis{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
</style>
<style lang="scss">
.el-popper.dc-table-ellipsis-popover{
  min-width: 300px;
  font-size: 12px;padding:10px 0px 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}
    .el-scrollbar__thumb{
      background-color:rgba(255, 255, 255, 0.3)
    }
  }
}
</style>

//页面引用组件
<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>

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>

5. 局部全屏，el-popper看不到加上:append-to-body="false"

<el-popover v-model="show" :popper-options="{boundariesElement: 'body'}" :append-to-body="false">