el-table操作栏优化

使用场景：

例如：经常会遇到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>