效果:

 

爷爷:

<template>
  <ElPlusCrud :searchList="searchList">
    <template #input2> xxx </template>
  </ElPlusCrud>
</template>

<script setup>
  import ElPlusCrud from '../../components/el-plus-crud/index.vue'
  import { reactive } from 'vue'

  const searchList = reactive([{ name: 'input1' }, { name: 'input2' }, { name: 'input3' }])
</script>

爸爸
<SearchCrud :searchList="props.searchList" >
  <template v-for="(item, index) in searchList" v-slot:[item.name] >
    <slot :name="item.name">
    </slot>
  </template>
</SearchCrud>

孙子

<el-form size="small" label-position="left">
  <el-row :gutter="20">
    <el-col v-for="(item, index) in searchList" :xs="24" :sm="12" :md="8" :lg="6">
      <el-form-item :label="item.name">
        <slot :name="item.name">
          <el-input></el-input>
        </slot>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>
Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐