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">
