<el-form ref="moreForm" :model="formInline" inline>
<el-row type="flex" class="flex-row" :gutter="0">
<slotvue :head-list="headList[32]">
<template slot="单据日期">
<el-form-item label="单据日期" style="margin-right:0x">
<date-range-picker v-model="formInline.dateArea" style="width:100%" @change="changeDate" />
</el-form-item>
</template>
<template slot="单据号">
<el-form-item label="单据号" style="margin-right:0x">
<el-input v-model="formInline.strreceiptno" placeholder="请输入" clear style="width:100%" />
</el-form-item>
</template>
<template slot="合同编号">
<el-form-item label="合同编号">
<el-input v-model="formInline.strcontractcode" clearable placeholder="请输入" style="width:100%" />
</el-form-item>
</template>
<template slot="合同名称">
<el-form-item label="合同名称">
<el-input v-model="formInline.strcontractname" clearable placeholder="请输入" style="width:100%" />
</el-form-item>
</template>
<template slot="往来单位">
<el-form-item label="往来单位">
<contact-unit-picker v-model="formInline.lngcustomerid" placeholder="请选择往来单位" style="width:100%" />
</el-form-item>
</template>
<template slot="合同类别">
<el-form-item label="合同类别" style="margin-right:0x">
<tree-select
v-model="formInline.contracttypepath"
:options="contractTypeTree"
placeholder="请选择"
filterable
clearable
:props="{
label:'treedatacodeandname',
value:'path',
children:'childList'
}"
style="width:100%"
/>
</el-form-item>
</template>
<template slot="状态">
<el-form-item label="状态">
<el-select v-model="formInline.bytstatus" placeholder="请选择" style="width: 100%;">
<el-option
v-for="item in statusList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</template>
</slotvue>
</el-row>
</el-form>
headList: {
31: [
{ name: '单据日期' },
{ name: '单据号' },
{ name: '合同编号' },
{ name: '合同名称' },
{ name: '往来单位' },
{ name: '合同类别' },
{ name: '状态' }
],
32: [
{ name: '单据日期' },
{ name: '状态' },
{ name: '单据号' },
{ name: '合同编号' },
{ name: '合同名称' },
{ name: '往来单位' }
]
}
slotvue组件
<template>
<div class="dynamic">
<el-col v-for="(item,index) in headList" :key="index" :span="24">
<slot :name="item.name" />
</el-col>
</div>
</template>
<script>
export default {
props: {
headList: {
type: Array,
default: () => []
}
},
data() {
return {
}
}
}
</script>