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) => {
            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) => {
          search.value = value;
        },
      }),
  },

 

3.在渲染函数中通过ref访问Dom元素

（1）vue3如何在模板语法中使用ref：

<div ref="divRef"></div>

const divRef = ref(); // 初始值需要赋值为空，或者null，变量名一定要和模版中的ref一致
console.log(divRef.value.$el.click());

（2）在h渲染函数中使用并访问ref：

const divRef = ref();

h('div', {
   ref: divRef, // 此处ref的值是divRef变量，不可写成 “divRef” 字符串，否则访问不到
}, "ref demo")