cip-components/cip-table-handler/index.jsx

import { ref, onMounted, onUnmounted } from 'vue'
import { ElDropdown, ElDropdownMenu, ElDropdownItem } from 'element-plus'
import CipTableButton from '@cip/components/cip-table-button'

const getButtonInfo = (vnode) => {
  if (vnode.component) {
    const text = vnode.component.slots.default()
    return {
      ...vnode.component.ctx._.props,
      ...vnode.component.ctx._.attrs,
      text
    }
  }
  return {}
}
const RenderComponent = (props) => {
  const list = props.buttonList // .value
  let dropDownNode
  let buttonNodeList = list
  if (list.length > props.limit) {
    buttonNodeList = list.slice(0, props.limit - 1)
    dropDownNode = <ElDropdown style={'margin-left: 8px'} size={'small'}>
      {{
        default: () => <CipTableButton>更多<i class={'el-icon-caret-bottom'}/></CipTableButton>,
        dropdown: () => <ElDropdownMenu>
          {
            list.slice(props.limit - 1).map(item => {
              const { onClick, text, disabled } = getButtonInfo(item)
              return <ElDropdownItem onClick={onClick} disabled={disabled}>{text}</ElDropdownItem>
            })
          }
        </ElDropdownMenu>
      }}
    </ElDropdown>
  }
  const result = buttonNodeList.map(item => {
    const { onClick, text, type, icon, disabled } = getButtonInfo(item)
    return <CipTableButton type={type} disabled={disabled} icon={icon} onClick={onClick}>{text}</CipTableButton>
  })
  if (dropDownNode) {
    result.push(dropDownNode)
  }
  return result
}
export default {
  name: 'CipTableHandler',
  props: {
    limit: { type: Number, default: 3 }
  },
  setup (props, { slots }) {
    const buttonList = ref([])
    const originRef = ref()
    onMounted(() => {
      collectButtons()
      const mutationObserver = new MutationObserver((mutations) => {
        console.log('mutations', mutations)
        collectButtons()
      })
      mutationObserver.observe(originRef.value, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true
      })
      onUnmounted(() => {
        mutationObserver.disconnect()
      })
    })
    const collectButtons = () => {
      buttonList.value = []
      vnodeList.forEach(vnode => getButtons(vnode))
    }
    let vnodeList = []
    const getButtons = (vnode) => {
      if (vnode.shapeFlag === 16) {
        vnode.children.forEach(v => getButtons(v))
      }
      if (vnode.shapeFlag === 36) {
        const componentName = (vnode.type.name || '').toLowerCase()
        if (componentName.indexOf('button') > -1) {
          buttonList.value.push(vnode)
        } else {
          if (vnode.component) {
            const children = vnode.component.subTree.children || []
            children.forEach(v => getButtons(v))
          }
        }
      }
    }
    let count = 1
    return () => {
      vnodeList = slots.default?.()
      count++
      return <div class={'cip-table-handler'}>
        <div ref={el => { originRef.value = el }} style={'display: none'}>{vnodeList}</div>
        <RenderComponent key={count} limit={props.limit} buttonList={buttonList.value} />
      </div>
    }
  }
}