vue3动态生成组件，vue3动态生成element plus组件，动态生成el-tag。数据字典与类型的动态解析

示例代码如下：

<template>
  <el-table :data="tableData">
    <el-table-column align="center" label="敏感词类型" prop="sensitive_type" min-width="100">
      <template #default="scope">
        <component :is="renderSensitiveType(scope.row.sensitive_type)" />
      </template>
    </el-table-column>
  </el-table>
</template>
<script setup lang="ts">
import { ref, h } from 'vue';
import { ElTag } from 'element-plus';
// 模拟 dictionary 函数
const dictionary = (type: string) => {
  if (type === 'sensitive_type') {
    return [
      { value: '1', label: '类型1', color: 'success' },
      { value: '2', label: '类型2', color: 'warning' },
    ];
  }
  return [];
};
let sensitive_type_dic = dictionary('sensitive_type');
const tableData = ref([
  { sensitive_type: '1' },
  { sensitive_type: '2' },
  { sensitive_type: '' },
]);
const renderSensitiveType = (_value: string) => {
  if (_value) {
    let st = sensitive_type_dic.find((o: any) => o.value === _value);
    return () => h(ElTag, { type: st.color }, () => st.label);
  } else {
    return () => '无！';
  }
};
</script>

代码解释：

1：运用<component :is="..."> 动态渲染组件。renderSensitiveType函数会返回一个渲染函数，此函数会生成对应的组件或者文本内容。

2：h 函数（即 createVNode）是 Vue 用来创建虚拟节点的核心函数。