1. el-tooltip 超出宽度显示文字提示，否则隐藏
<!-- 第一种方法 -->
<template>
<div class="menu-item-container">
<el-tooltip :content="contentHover" placement="right" :disabled="isShowTooltip">
<p class="title-container" @mouseover="onMouseOver(title)">
<span class="menu-title" :ref="title">{{ title }}</span>
</p>
</el-tooltip>
</div>
</template>
<script>
export default {
name: 'MenuItem',
props: {
title: String
},
data() {
return {
isShowTooltip: false,
contentHover: ''
};
},
methods: {
/**
* 鼠标移入事件
* @param {title} ref 的 title 值
*/
onMouseOver(title) {
const el = this.$refs[title];
const parentWidth = el.parentNode.offsetWidth; // 获取元素父级可视宽度
const contentWidth = el.offsetWidth; // 获取元素可视宽度
this.isShowTooltip = contentWidth <= parentWidth;
// 鼠标悬停后显示的内容
this.contentHover = title;
}
}
}
</script>
<style scoped>
.title-container {
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<!-- 第二种方法 解决 el-autocomplete中 搜索列表 tooltip进入下一项闪烁问题 -->
<template>
<el-autocomplete class="inline-input" placeholder="搜索">
<template slot-scope="{ item }">
<el-tooltip :content="item.title" placement="right" :disabled="isShowTooltip">
<p class="ellispis" @mouseover="onMouseOver($event)">{{ item.title }}</p>
</el-tooltip>
</template>
</div>
</template>
<script>
export default {
data() {
return {
isShowTooltip: true,
contentHover: ''
};
},
methods: {
// 鼠标移入事件
onMouseOver(e) {
const el = e.target;
// scrollWidth: 对象的实际内容的宽度，不包括边线宽度，会随对象中内容超过可视区后而变大
// offsetWidth: 对象整体的实际宽度，包括滚动条等边线，会随对象显示大小的变化而改变
this.isShowTooltip = el.scrollWidth <= el.offsetWidth;
}
}
}
</script>
<style lang="less">
.ellispis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.el-tooltip__popper {
top: -100px; // 解决 tooltip与非tooltip来回切换，左上角会闪现tooltip弹框
}
</style>
2. 使用阿里乾坤等微前端嵌入Element-UI弹出框页面时
2.1 改变Popover 弹出框样式在微前端中不生效
原因：Popover默认是插入到body元素上的，此时得修改成插入到父级元素中
<template>
<el-popover
:append-to-body="false"
placement="bottom"
width="200"
trigger="click"
:popper-options="popperOptions"
>
<el-button ref="popRef" slot="reference">click 激活</el-button>
<p>内容</p>
</el-popover>
</template>
当插入到父元素后悔发现原本的弹框边界悔自动变换位置的特性失效了
解决办法：设置popper-options中的boundariesElement为边界判定的HTMLElement元素
<script>
export default {
data() {
return {
popperOptions: {
boundariesElement: 'body',
gpuAcceleration: false
}
}
},
mounted() {
// 这里尝试后发现 第一个 offsetParent 值必须为边界容器，否则不生效，具体原因不清楚，欢迎大佬解答
this.popperOptions.boundariesElement = this.$refs.moreImg.offsetParent
}
}
</script>
2.2 当把el-dialog中的modal-append-to-body和append-to-body都设为false时，关闭弹框时，遮罩层挡住问题
解决办法：控制v-modal的hidden属性来显示隐藏遮罩层
<template>
<div ref="dialogContainer">
<el-dialog
:visible.sync="dialog.visible"
width="30%"
:modal-append-to-body="false"
:append-to-body="false"
@open="haddleDia(true)"
@close="haddleDia(false)"
></el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialog: {
visible: false
}
}
},
methods: {
haddleDia(bool) {
this.dialog.visible = bool
this.$refs.dialogContainer.lastChild.hidden = !bool
}
}
}
</script>
3. el-table相关问题
3.1 自定义expand展开收缩
<template>
<el-table ref="table" :data="tableData">
<template v-for="(header, i) in headerList">
<el-table-column
:key="i"
:prop="header.prop"
:label="header.label"
:width="header.width || 'auto'"
/>
</template>
<el-table-column label="操作" width="120">
<template slot-scope="scope">
<p class="btn" @click="toogleExpand(scope.row)">查看详情</p>
</template>
</el-table-column>
<el-table-column type="expand" width="1">
<template slot-scope="props">
详情内容
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
headerList: [
{ prop: 'name', label: '姓名' },
{ prop: 'time', label: '时间' }
]
}
},
methods: {
toogleExpand(row) {
this.$refs.table.toggleRowExpansion(row)
}
}
}
</script>
3.2 自定义filter筛选图标和内容
<template>
<el-table ref="table" :data="tableData">
<el-table-column width="108">
<template slot="header">
<el-popover placement="bottom-start" trigger="click">
<p slot="reference">
<span>分类</span>
<img src="">
</p>
</el-popover>
</template>
<template slot-scope="scope">
<p>表格body内容</p>
</template>
</el-table-column>
</el-table>
</template>
<style lang="scss">
.el-table {
.el-table__header-wrapper {
overflow: initial;
thead {
th.el-table__cell,
.cell {
overflow: initial;
}
}
}
}
</style>
3.3. el-date-picker设置时间跨度
<template>
<el-date-picker
v-model="timeRange"
type="daterange"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
:picker-options="pickerOptions"
></el-date-picker>
</template>
<script>
export default {
data() {
return {
timeRange: '',
timeOptionRange: '',
pickerOptions: {
disabledDate: (time) => {
// 选择时间不能小于当天
if (time.getTime() < Date.now() - 8.64e7) {
return true;
}
// 最长跨度为 180 天
const maxNum = 60 * 60 * 24 * 1000 * 179;
// 最短为 2 天
const minNum = 60 * 60 * 24 * 1000 * 2
if (this.timeOptionRange) {
const maxLongTime = this.timeOptionRange + maxNum
const minLongTime = this.timeOptionRange - maxNum
const maxShortTime = this.timeOptionRange + minNum
const minShortTime = this.timeOptionRange - minNum
return (time.getTime() > maxLongTime || time.getTime() < minLongTime) || (time.getTime() > minShortTime && time.getTime() < maxShortTime);
}
},
onPick: ({ minDate, maxDate }) => {
// 当第一时间选中才设置禁用
if (minDate && !maxDate) {
this.timeOptionRange = minDate.getTime();
}
if (maxDate) {
this.timeOptionRange = null;
}
}
}
}
}
}
</script>
3.4 el-tree和el-select结合实现树状多选
3.4.1 代码
3.4.2 效果图：
3.5 el-table动态行合并
<template>
<el-table
:data="tableData"
border
:span-method="objectSpanMethod"
>
<template v-for="header in headerList">
<el-table-column
:key="header.prop"
:prop="header.prop"
:label="header.label"
:width="header.width || 'auto'"
/>
</template>
</el-table>
</template>
<script>
export default {
data() {
return {
headerList: [],
tableData: [],
merges: {},
mcIndexs: [0, 1, 2] // 要合并的列
}
},
created() {
this.headerList = this.initHeaderList()
this.tableData = this.initTableData()
this.getMerges(this.tableData)
},
methods: {
initHeaderList() {
return [
{ label: '日期', prop: 'date', width: 180 },
{ label: '姓名', prop: 'name', width: 180 },
{ label: '地址', prop: 'address', width: 220 }
]
},
initTableData() {
return [
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄' },
{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄' },
{ date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' },
{ date: '2016-05-03', name: '高启强', address: '上海市普陀区金沙江路 1519 弄' }
]
},
// 单元格合并
objectSpanMethod({ row, rowIndex, columnIndex }) {
return this.merges[`${rowIndex}_${columnIndex}`]
},
getMerges(tableData) {
this.merges = {}
const pathvNum = {}
tableData.forEach((row) => {
this.mcIndexs.forEach(columnIndex => {
const pathV = this.getPathV(row, columnIndex)
pathvNum[pathV] = pathvNum[pathV] ? pathvNum[pathV] + 1 : 1
})
})
const merged = {}
tableData.forEach((row, rowIndex) => {
this.mcIndexs.forEach(columnIndex => {
const pathV = this.getPathV(row, columnIndex)
if (!merged[pathV]) {
if (!this.merges[`${rowIndex}_${columnIndex}`]) {
this.merges[`${rowIndex}_${columnIndex}`] = [pathvNum[pathV], 1]
}
merged[pathV] = true
} else {
this.merges[`${rowIndex}_${columnIndex}`] = [0, 0]
}
})
})
console.log(this.merges);
},
// 获取某一行从第一列值到columnIndex列值的和
getPathV(row, columnIndex) {
const vs = []
for (let i = 0; i <= columnIndex; i++) {
const column = this.headerList[i]
vs.push(row[column.prop])
}
return vs.join('->')
}
}
}
</script>
3.5.2 效果图
3.6 el-table表格列宽随内容自适应
3.6.1 代码
<script>
export default {
created() {
this.headerList.forEach(c => {
c.width = this.flexTableWidth(c, this.tableData)
})
},
methods: {
// 获取某一行从第一列值到columnIndex列值的和
getPathV(row, columnIndex) {
const vs = []
for (let i = 0; i <= columnIndex; i++) {
const column = this.headerList[i]
vs.push(row[column.prop])
}
return vs.join('->')
},
/**
* @param { Object } c 表头项
* @param { Array } tableData 表格数据
* @param { Number } maxWidth 单列最大宽度
*/
flexTableWidth(c, tableData, maxWidth) {
// 获取该列中最长的内容
let index = 0
let columnContent = '' // 占位最宽的内容
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
context.font = '14px'
tableData.forEach((v, i) => {
if (v[c.prop] === null) return
const curr_temp = v[c.prop] + ''
const max_temp = tableData[index][c.prop] + ''
const curr_temp_w = context.measureText(curr_temp).width
const max_temp_w = context.measureText(max_temp).width
if (curr_temp_w > max_temp_w) {
index = i
}
})
columnContent = tableData[index][c.prop] + ''
// 小于表头宽度时，取表头宽度
const title_w = context.measureText(c.label).width
const column_w = context.measureText(columnContent).width
if (maxWidth && column_w > maxWidth) {
return maxWidth
}
if (column_w < title_w && c.label !== '') {
columnContent = c.label
}
return context.measureText(columnContent).width + 20
}
}
}
</script>
