vxe gird表单渲染器实现自定义Select组件及事件

渲染是vxe的高级用法，常见自定义或复用代码有以下形式：

• 渲染器：抽象一切可复用的功能（类似组件的概念），实现非常简单的可配置化；
• 插槽：自定义程度高，但需要重复写冗余代码，比较繁琐；

引言

---

文档demo 是vxe input组件，也没有使用事件

由此就诞生了我这篇文章

ElInput案例

---

在这个案例中，我们将展示如何使用 Element-Plus 的 ElInput 组件，并通过传递 props 来实现组件的配置和使用。

add('FormItemInput', {
    // 项显示模板
    renderItemContent(renderOpts, params) {
      const { data, field, item } = params
      const { props } = renderOpts

      return (
        <ElInput
          v-model={data[field]}
          clearable
          {...props}
          placeholder={`请输入${item.title}`}
          style="width: 100%"
        ></ElInput>
      )
    }
  })

在表单配置中使用自定义渲染器：

formConfig{
    ...
    items:[{
        field: 'number',
        title: '申请单号',
        span: 6,
        itemRender: { name: 'FormItemInput', props: { disabled: true } }
      }
    ]
    ...
}

Select案例和change事件

---

文档提供的属性只针对于Vxe组件的Select，所以要实现三方的Select只能手撸。

在这个案例中，我们将展示如何使用 Element-Plus 的 ElSelect 组件，并通过回调函数实现事件处理。

add('FormItemSelect', {
    renderItemContent(renderOpts, params) {
      const { data, field, item } = params
      const { props, events } = renderOpts
      console.log('FormItemSelect renderOpts', renderOpts, '\nFormItemSelect params', params)
      return (
        <ElSelect
          v-model={data[field]}
          clearable
          placeholder={`请选择${item.title}`}
          style="width: 100%"
          onChange={(e) => {
            if (e && events && events.change) {
              events.change(e)
            }
          }}
          {...props}
        >
          {props?.options.map((option) => (
            <ElOption key={option.value} label={option.label} value={option.value}></ElOption>
          ))}
        </ElSelect>
      )
    }
  })

在表单配置中使用自定义渲染器并处理事件：

formConfig{
    ...
    {
        field: 'odd_type',
        title: '源单类型',
        span: 6,
        itemRender: {
          name: 'FormItemSelect',
          props: {
            options: [
              { label: '销售订单', value: '销售订单' },
              { label: '采购订单', value: '采购订单' }
            ]
          },
          events: {
              change: (e) => { console.log('11111111', e) }
          }
        }
      }
    ...
}

通过这些案例，我们可以看到如何利用 Vxe-Grid 和 Element-Plus 的强大功能，实现灵活且可复用的组件渲染。希望这些示例能够帮助你在实际项目中更好地应用这些技术。