vhb-table/packages/form/src/render.js

一个基于 vue 的 PC 端表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...

import GlobalConfig from '../../v-h-b-table/src/conf'
import VHBTable from '../../v-h-b-table'
import { isEnableConf, getFuncText } from '../../tools/utils'

function renderPrefixIcon (h, titlePrefix) {
  return h('span', {
    class: 'vhb-form--item-title-prefix'
  }, [
    h('i', {
      class: titlePrefix.icon || GlobalConfig.icon.FORM_PREFIX
    })
  ])
}

function renderSuffixIcon (h, titleSuffix) {
  return h('span', {
    class: 'vhb-form--item-title-suffix'
  }, [
    h('i', {
      class: titleSuffix.icon || GlobalConfig.icon.FORM_SUFFIX
    })
  ])
}

export function renderTitle (h, _vm, item) {
  const { data, tooltipOpts } = _vm
  const { slots, field, itemRender, titlePrefix, titleSuffix } = item
  const compConf = isEnableConf(itemRender) ? VHBTable.renderer.get(itemRender.name) : null
  const params = { data, property: field, item, $form: _vm }
  const contVNs = []
  const titVNs = []
  if (titlePrefix) {
    titVNs.push(
      (titlePrefix.content || titlePrefix.message)
        ? h('vhb-tooltip', {
          props: {
            ...tooltipOpts,
            ...titlePrefix,
            content: getFuncText(titlePrefix.content || titlePrefix.message)
          }
        }, [
          renderPrefixIcon(h, titlePrefix)
        ])
        : renderPrefixIcon(h, titlePrefix)
    )
  }
  titVNs.push(
    h('span', {
      class: 'vhb-form--item-title-label'
    }, compConf && compConf.renderItemTitle ? compConf.renderItemTitle(itemRender, params) : (slots && slots.title ? _vm.callSlot(slots.title, params, h) : getFuncText(item.title)))
  )
  contVNs.push(
    h('div', {
      class: 'vhb-form--item-title-content'
    }, titVNs)
  )
  const fixVNs = []
  if (titleSuffix) {
    fixVNs.push(
      (titleSuffix.content || titleSuffix.message)
        ? h('vhb-tooltip', {
          props: {
            ...tooltipOpts,
            ...titlePrefix,
            content: getFuncText(titleSuffix.content || titleSuffix.message)
          }
        }, [
          renderSuffixIcon(h, titleSuffix)
        ])
        : renderSuffixIcon(h, titleSuffix)
    )
  }
  contVNs.push(
    h('div', {
      class: 'vhb-form--item-title-postfix'
    }, fixVNs)
  )
  return contVNs
}