Vue3 h函数渲染组件

1、渲染ElSelect组件

const modulleFilters = ref([
  { label: 1, value: 2 },
  { label: 2, value: 3 },
]);
const search = ref('');

const tableColumn = [
  {
    prop: 'module',
    label: '模块',
    headerRender: () =>
      h(
        ElSelect,
        {
          size: 'small',
          placeholder: '请输入内容',
          modelValue: search.value,
          'onUpdate:modelValue': (value: any) => {
            return (search.value = value);
          },
        },
        () =>
          modulleFilters.value?.map(item => {
            return h(ElOption, { label: item.label, value: item.value });
          })
      ),
    render: ({ column }) => h('span', column.moduleName),
  },
]

2、渲染ElInput组件

{
    prop: 'address',
    label: '地址',
    width: 130,
    visible: true,
    headerRender: () =>
      h(ElInput, {
        ...ElInput.$el,
        ...ElInput.$attrs,
        size: 'small',
        placeholder: '请输入内容',
        modelValue: search.value,
        'onUpdate:modelValue': (value: any) => {
          return (search.value = value);
        },
      }),
  },