vue中插槽的使用

我的使用场景是：在某个页面中每个点击项的搜索条件和展示表格都不一样，单都有同一项，同时也会进行增加不同搜索或者table项
**# 1.
# 在子组件中写入插槽，并且进行具名，还有一种写法v-slot：select，
**

                   这里是form
                   
		<el-form
			:model="queryParams"
			ref="queryForm"
			:inline="true"
			v-show="showSearch"
			label-width="100px"
		>
			<slot name='select'></slot>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					size="mini"
					@click="handleQuery"
				>搜索
				</el-button
				>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
				>重置
				</el-button
				>
			</el-form-item>
		</el-form>
                
                这里是table
                
                <el-table v-loading="loadingCusn" :data="taskList" border>
			<el-table-column label="序号" type="index" width="50" align="left">
				<template slot-scope="scope">
          <span>{{
		          (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1
			  }}</span>
				</template>
			</el-table-column>
			<el-table-column
				label="任务类型"
				min-width="120"
				align="left"
				prop="procdef_key"
				:formatter="procdefkeyFomatter"
				:show-overflow-tooltip="true"
			/>
			<slot name="table"></slot>
			<el-table-column
				label="操作"
				min-width="100"
				align="left"
				class-name="small-padding fixed-width"
			>
				<template slot-scope="scope">
					<el-button
						size="mini"
						type="text"
						icon="el-icon-view"
						@click="handleWatch(scope.row)"
					>审批
					</el-button>
				</template>
			</el-table-column>
		</el-table>
                
**# 2.
# 在夫组件中，首先引入**
 
 
	<CusnList ref="CusnSlot" @getList="getList" @resetQuery="resetQueryCusn" :loadingCusn="loading">
        
                form的插槽
        
		<template #select>
			<el-form-item label="创建时间">
				<el-date-picker
					v-model="dateRange"
					size="small"
					style="width: 240px"
					value-format="yyyy-MM-dd"
					type="daterange"
					range-separator="-"
					start-placeholder="开始日期"
					end-placeholder="结束日期"
					@change="changeDateRange"
				></el-date-picker>
			</el-form-item>

			<el-form-item label="发起人部门" prop="user_dept_id">
				<treeselect
					v-model="queryParams.user_dept_id"
					:options="deptOptions"
					placeholder="请选择发起人部门"
					clearable
					size="small"
					style="width: 215px"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
			<el-form-item label="外协单位" prop="osp_com" >
				<el-input
					v-model="dataCusn.params.like_osp_com"
					placeholder="请输入外协单位"
					clearable
					size="small"
					style="width: 215px"
					@keyup.enter.native="handleQuery"
				/>
			</el-form-item>
		</template>


                table插槽

		<template #table>
			<el-table-column label="任务名称" min-width="120" align="left" prop="active_name" :show-overflow-tooltip="true"/>
			<el-table-column label="发起人" min-width="80" align="left" prop="user_name" :show-overflow-tooltip="true"/>
			<el-table-column label="发起人部门" min-width="150" align="left" prop="user_dept_name" :show-overflow-tooltip="true"/>
			<el-table-column label="发起时间" min-width="150" align="left" prop="create_time" :show-overflow-tooltip="true"/>
			<el-table-column label="外协单位" min-width="150" align="left" prop="create_time" :show-overflow-tooltip="true">
				<template slot-scope="scope">
					<span>{{ JSON.parse(scope.row.business_data).osp_com }}</span>
				</template>
			</el-table-column>
		</template>
	</CusnList>

import CusnList from "./list.vue";
	name: "Post",
	components: {
		CusnList
	},