1.插槽嵌套多层数据ui组件怎么使用
思路：插槽具名【区分】后暴露传递，这个为神魔要区分，因为封装组件表格列表项也有插槽
步骤一：表单插槽暴露

    <ElFormclass="form-search":model="formParams"ref="formRef":style="fixedStyle"><div:class="['form-serach-item-box']"v-for="(item, index) of (disposeFormItemList || []).slice(0,formItemNum)":key="index"v-show="!item.show":grid="fiexedNum"><!-- 搜索插槽 --><ElFormItemclass="form-item-input"v-if="item.type !== '%' && item.type == 'slot'"colon:label="item.label":prop="item.prop"><!-- 插槽自定义检索组件 --><slotv-if="item.slotName":name="item.slotName"v-bind="{field: item.prop,model: formParams,}"></slot></ElFormItem></div></ElForm>

步骤2：表格组件区分暴露插槽

  <div class="table-warpper_lat" :style="fixedTableHeight"><C_BasicFormSearchref="_formSearchRef"v-if="formItemList":id="_searchFormUuid":formParams="initFormParams!":formItemList="list"@e_dispatchGetDataFn="e_dispatchGetDataFn"@e_changeParms="emits('e_changeParams', $event)"@changeFlodSearch="calcTableClientHeight"@reset="emits('reset')":formSearchInputHistoryString="formSearchInputHistoryString":class="_isShowSearch ? 'show-search' : 'none-search'":formItemNum="formItemNum":fiexedNum="fiexedNum":isShowSearchMore="isShowSearchMore":cardBorder="cardBorder":useOutReset="useOutReset":drawerSize="drawerSize":searchFormJustify="searchFormJustify":searchFormLabelPosition="searchFormLabelPosition"><template#[replaceFormSlotKey(item)]="data"v-for="item in getFormSlotKeys"><slot :name="item" v-bind="data || {}"></slot></template></C_BasicFormSearch><ElCard:shadow="shadow":class="{ 'table-warpper': true, 'table-no-border': !cardBorder }":id="_tableUuid"><!-- TODO: 表格 --><ElTable:row-key="rowkey"v-bind="$attrs"ref="_tableRef":border="border":data="_tableData":tree-props="props.treeProps":class="props.className":header-cell-style="setHeaderStyle"v-loading="_isLoading"@selection-change="selectChange"@select="select"@select-all="selectAll"@cell-mouse-enter="cellMouseEnter"@cell-mouse-leave="cellMouseLeave"@cell-click="cellClick"@cell-dblclick="cellDblclick"@cell-contextmenu="cellContextmenu"@row-click="rowClick"@row-contextmenu="rowContextmenu"@row-dblclick="rowDblclick"@header-click="headerClick"@header-contextmenu="headerContextmenu"@sort-change="sortChange"@filter-change="filterChange"@current-change="currentChange"@header-dragend="headerDragend"@expand-change="expandChange"@clearSelection="() => (_selectedAllRows = [])"v-waterMarker="waterMarker"><el-table-columnfixed="left":width="25"type=""v-if="getIsDraggable()"><el-icon class="dragIcon" title="拖拽"><Rank /></el-icon></el-table-column><el-table-columnfixed="left"v-if="isSelect"v-bind="selectConfig"type="selection"align="center"/><el-table-columntype="index":width="indexWidth"fixed="left":index="props.indexFn"label="序号"v-if="showIndex"align="center"class-name="index"><template #header v-if="indexHeaderSlots"><component :is="indexHeaderSlots" /></template></el-table-column><template v-for="item of tableColumns" :key="item"><tableColumn :item="item" v-bind="omit(item, ['children'])"><template #[item]="scope" v-for="item in getTableColumnSlots"><slot:name="item":column="scope.column":row="scope.row":index="scope.$index"/></template></tableColumn></template><el-table-columnfixed="right"label="操作":width="actionWidth"align="center"v-if="$slots.action"><template #default="scope"><slotname="action":column="scope.column":row="scope.row":index="scope.$index"/></template></el-table-column></ElTable><div class="table-footer-wrapper"><div class="table-footer-left"><slot name="table-footer-tool" /></div><!-- TODO: 分页器 --><divv-if="isShowPage && total > 0"class="table-footer-right":style="{justifyContent: pageAlignJustifyContent,}"><ElPaginationv-model:currentPage="page"v-model:page-size="pageSize":page-sizes="pageSizes":small="'small'":disabled="false":background="true"layout="total, sizes, prev, pager, next, jumper":total="total"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div></div></ElCard></div>//表格搜索插槽-开始
function replaceFormSlotKey(key: string) {if (!key) return ''return key?.replace?.(/form\-/, '') ?? ''
}
const getFormSlotKeys = computed(() => {const that = getCurrentInstance()const keys = Object.keys(that!.slots)return keys.map((item) => (item.startsWith('form-') ? item : null)).filter((item) => !!item) as string[]
})
//表格搜索插槽-结束
// 列设置
const tableColumns = ref<I_TableColumns[]>(props.columns)
// 表格列中的插槽
const getTableColumnSlots = computed(() => {const that = getCurrentInstance()const slotsList: string[] = []Object.keys(that!.slots).forEach((item) => {if (!item.startsWith('form-')) {slotsList.push(item)}})return [...tableColumns.value.filter((item) => item.slot).map((item) => item.slot),'expandSlot', // 兼容列 type 为 'expand' 的列...slotsList,]
})

步骤3页面使用姿势

    <template #form-contractCode1="{ model, field }"><el-input type="number" v-model="model[field]" placeholder="请输入"><template #append>元</template></el-input></template>配置项// // 表格搜索插槽-步骤1

{
type: ‘slot’,
prop: ‘overhaulCode1’,
label: ‘单号1’,
placeholder: ‘请输入1’,
slotName: ‘contractCode1’,
},
成果展示