vue3动态生成组件，vue3动态生成element plus组件，动态生成el-tag。数据字典与类型的动态解析 电脑版发表于：2025/4/15 19:56 ### 示例代码如下： ``` <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 用来创建虚拟节点的核心函数。
