使用场景:
例如:经常会遇到el-table中操作项中有多个操作按钮,table-cell容纳不下。
解决方案:
根据宽度调整显示个数,显示不下的都移到扩展符中。
还需找到一种方法不手动设置margin,使扩展符和按钮保持相同的距离。
尚不清楚有何边界情况bug。
<template>
<div ref="ofRef" class="of">
<div class="stdPart">
<slot />
</div>
<el-dropdown v-if="showDropdown" trigger="click" ref="dropdownRef">
<el-button
link
type="primary"
size="small"><el-icon><More /></el-icon></el-button>
<template #dropdown>
<el-dropdown-menu>
<slot />
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</template>
<script setup>
import { ref, onMounted, nextTick } from 'vue'
const ofRef = ref()
const dropdownRef = ref()
const cellWidth = ref(0) // cell宽
const scrollWidth = ref(0) // 内容宽
const showDropdown = ref(false) // 显隐
onMounted(() => {
// console.log(ofRef)
cellWidth.value = ofRef.value.parentNode.offsetWidth - 32 // 减去padding
scrollWidth.value = ofRef.value.scrollWidth
if (cellWidth.value < scrollWidth.value) {
const nodes = ofRef.value.children[0].children
// const nodes = ofRef.value.children
let maxCount = 0 // 最多能放下几个
for (const v of nodes) {
if (v.offsetLeft + v.offsetWidth <= cellWidth.value) {
maxCount++
}
}
for (let i = maxCount - 1; i < nodes.length; i++) {
nodes[i].style.display = 'none'
}
showDropdown.value = true
nextTick(() => {
const dropdownNodes = dropdownRef.value.contentRef.children
for (let i = 0; i < maxCount - 1; i++) {
dropdownNodes[i].style.display = 'none'
}
})
}
})
</script>
<style lang="scss" scoped>
.of{
display: flex;
.stdPart{
display: flex;
align-items: center;
}
.el-dropdown{
display: flex;
align-items: center;
margin-left: 12px;
}
}
.el-dropdown-menu{
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
:deep(.el-button){
margin: 4px;
}
}
</style>