ebiz-ai-knowledge-manage/src/components/RenderTable/component/bodySlot/index.vue

<script>
// 自定义内容的组件 实现element 自带render函数
const RenderSlot = {
  functional: true,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, data) => {
    const renderTooltip = first => {
      return h(
        'el-tooltip',
        {
          props: {
            placement: 'left',
            content: first[0].data.props.title
            // effect: 'light'
          }
        },
        first
      )
    }
    const renderPopver = other => {
      return h(
        'el-popover',
        {
          props: {
            placement: 'bottom-end',
            width: '100',
            trigger: 'hover',
            popperClass: 'table-popver'
          },
          class: 'table-popver',
          scopedSlots: {
            reference: () =>
              h('el-button', {
                props: {
                  size: 'mini',
                  type: 'text',
                  icon: 'el-icon-more'
                },
                class: 'normal-button more-btn'
              })
          }
        },
        other
      )
    }
    const params = {
      row: data.props.row,
      index: data.props.index
    }
    if (data.props.column) {
      params.column = data.props.column
    }
    if (params.column.isRedraw) {
      let content = data.props.render(h, params)
      let contentDiv = content.children
      // if (contentDiv.length > 2) {
      // 切割掉第一个div
      //   const first = contentDiv.splice(0, 1)
      //   const other = contentDiv.splice(0, contentDiv.length)
      //   first[0].data.class = 'normal-button'
      //   first[0].data.props.type = null
      //   first[0].data.props.size = null
      //   other.forEach(item => {
      //     // item.data.class = 'normal-button '
      //     item.data.class = 'normal-button popver-button'
      //   })
      //
      //   content.children = [renderTooltip(first), renderPopver(other)]
      //   // content.children = [renderTooltip(first), ...other]
      //   return content
      // } else {
      // const first = contentDiv.splice(0, contentDiv)

      contentDiv = contentDiv.map(item => {
        item.data.class = 'normal-button'
        item.data.props.type = null
        item.data.props.size = null
        return renderTooltip([item])
      })
      content.children = contentDiv
      return content
      // }
      // let div =
    } else {
      return data.props.render(h, params)
    }

    // return data.props.render(h, params)
  }
}
export default {
  name: 'FormSlot',
  props: ['item', 'scope'],
  components: { RenderSlot },
  render() {
    let { item, scope } = this
    return (
      //   <el-form-item prop={`"${item.ruleName}"`} rules={item.rules}>
      <render-slot
        row={scope.row}
        render={item.render}
        index={scope.$index}
        column={item}
      />
      // </el-form-item>
      // </el-form>
    )
  }
}
</script>