byte-sailing-new/src/components/byTable/ElementsMapping.vue

<template>
  <div>
    
    <el-button v-for="(i,index) in getCellList"  @click="i.click()" :key="index" v-bind="i.attrs" v-show="index < 2">{{ i.attrs.label }}</el-button>
    <el-dropdown>
      <span class="el-dropdown-link">
        <span class="more-btn">更多</span>
        
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item 
            :class="index > 1 ? '' : 'dn'" 
            @click="i.click()" v-for="(i,index) in getCellList" 
            
            :key="index" >
            <span :style="i.attrs.type == 'danger' ? 'color:red' : 'color:#409eff'">{{ i.attrs.label}}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>
<script>
import {
  defineComponent,
  getCurrentInstance,
  computed,
  ref,
  h,
  withDirectives,
  resolveDirective,
  resolveComponent
} from 'vue'
export default defineComponent({
  props: {
    parent: {
      type: Object,
      default () {
        return {}
      }
    },
    row: {
      type: Object,
      default () {
        return {}
      }
    },
    cellList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  setup (props) {
    const { proxy } = getCurrentInstance()
    
    proxy.$.components = props.parent.$options.components
    proxy.$.directives = props.parent.$options.directives
    const elementsMapping = ref({
      button: 'el-button'
    })
    const getCellList = computed(() => {
      return props.cellList.filter((cell) => cell && Object.keys(cell).length)
    })
    const getAttrsValue = (item) => {
      if (!item.attrs) {
        item.attrs = {}
      }
      const {
        class: className = null,
        style = null,
        directives = null,
        ...attrs
      } = item.attrs
      return {
        class: className,
        style,
        directives,
        props: attrs
      }
    }
    if(getCellList.value.length > 3) {
      
      console.log(getCellList)
      return {
        getCellList
      }
    }
    return () => {
      return h(
        'div',
        getCellList.value.map((cellItem) => {
          const comp = resolveComponent(
            elementsMapping.value[cellItem.el] ||
            cellItem.el
          )
          const attributes = getAttrsValue(cellItem)
          const { label, ...others } = attributes.props
          const { directives } = attributes
          let onClick
          if (cellItem.click) {
            onClick = cellItem.click.bind(props.parent, props.row)
          }
          let resultVNode = h(
            comp,
            {
              onClick,
              innerHTML: label,
              ...others
            }
          )
          if (directives) {
            resultVNode = withDirectives(
              resultVNode,
              [
                ...directives.map((directiveItem) => {
                  return [
                    resolveDirective(directiveItem.name),
                    directiveItem.value,
                    directiveItem.arg
                  ]
                })
              ]
            )
          }
          return resultVNode
        })
      )
    }
  }
})
</script>
<style>
.more-btn{
  line-height: 34px;
  font-size: 14px;
  color:#FF9315;
}
.dn{
  display: none!important;
}
</style>