组件介绍

一、基本概念

Vue动态渲染组件是无需编写前端代码的自定义页面展示方案，支持三种加载方式：

• 远程加载：从API获取组件
• 本地文件：从文件加载组件
• 模板字符串：直接编写模板

二、页面级渲染

Builder::vue() - 远程加载

public function customPage()
{
  return Builder::vue('/api/component/remote', ['param' => 'value'], ['height' => 400]);
}

Builder::view() - 本地文件

public function customPage()
{
  return Builder::view('app/admin/view/custom/page', ['userId' => 1]);
}
// 加载：plugin/{插件名}/app/admin/view/custom/page.vue

Builder::display() - 自动匹配

// OrderController::statusPage() 
public function statusPage()
{
  return Builder::display();
}
// 自动加载：plugin/{插件名}/app/admin/view/order/status_page.vue

三、表格列Vue组件

addColumnVueRender - 模板渲染

Builder::crud(function($builder) {
  $template = <<<'VUE'
<template>
  <el-tag :type="statusMap[props.row.status]">{{ props.row.status_text }}</el-tag>
</template>
<script setup>
const props = defineProps(['row', 'index', 'column']);
const statusMap = { 1: 'success', 0: 'danger' };
</script>
VUE;

  $builder->addColumnVueRender('status', '状态', $template, ['width' => 100]);
});

addColumnVue - 本地文件

Builder::crud(function($builder) {
  $path = base_path('plugin/xbCode/public/vue/rating.vue');
  $builder->addColumnVue('rating', '评分', $path, ['width' => 150]);
});

addColumnVueRemote - 远程加载

Builder::crud(function($builder) {
  $builder->addColumnVueRemote('actions', '操作', '/api/vue/actions', [
    'width' => 200,
    'fixed' => 'right'
  ]);
});

四、表单Vue组件

addRowVueRender - 模板渲染

Builder::form(function($builder) {
  $template = <<<'VUE'
<template>
  <el-input v-model="localValue" @input="emit('change', localValue)" />
</template>
<script setup>
import { ref } from 'vue';
const props = defineProps(['value']);
const emit = defineEmits(['change']);
const localValue = ref(props.value);
</script>
VUE;

  $builder->addRowVueRender('content', '内容', '', $template);
});

addRowVue - 本地文件

Builder::form(function($builder) {
  $path = base_path('plugin/xbCode/public/vue/upload.vue');
  $builder->addRowVue('files', '文件', '', $path);
});

五、Props数据结构

// 表格列组件
const props = defineProps({
  row: Object,      // 当前行数据
  index: Number,    // 行索引
  column: Object    // 列配置
});

// 表单组件
const props = defineProps({
  value: [String, Number, Array, Object],  // 字段值
  formData: Object,                         // 表单数据
  field: String                             // 字段名
});

六、事件交互

<script setup>
const emit = defineEmits(['change', 'refresh']);

// 更新值
const handleChange = (val) => emit('change', val);

// 刷新数据
const handleRefresh = () => emit('refresh');
</script>

七、参数对比

八、组件类型

九、推荐方案

核心要点：所有Vue组件通过后端PHP定义，前后端完全分离，支持Vue 3 Composition API，优先使用本地文件方式以获得更好的性能和IDE支持。