el-table列表,搜索条件遍历出多个el-input或者el-select框和el-date-picker(子组件),v-model为啥不能回显,如何解决这个问题?
<!--子组件搜索条件MySearch.vue-->
<template>
<div class="my-search">
<el-form :model="searchForm" :size="size" inline :label-width="labelWidth">
<span v-for="(item, index) in searchForm" :key="index">
<el-form-item :label="item.label" :prop="item.prop">
<el-input
v-if="item.type === 'Input'"
v-model="item.value"
type="text"
placeholder="请输入"
/>
<el-select v-if="item.type === 'Select'" v-model="item.value">
<el-option v-for="op in options" :label="op.label" :value="op.value" :key="op.value" />
</el-select>
<el-date-picker
v-if="item.type === 'DateTime'"
:style="
item.timeType == 'datetime'
? 'width: 16vw'
: item.timeType == 'daterange'
? 'width: 19vw'
: ''
"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
v-model="item.value"
:type="item.timeType"
:value-format="item.valueFormat"
@change="timeChange"
/>
</el-form-item>
</span>
</el-form>
<el-button icon="el-icon-refresh-left" @click="reset"> 重置 </el-button>
<el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const props = defineProps<{
searchForm: any[];
options: any[];
timeType?: Object; //日期-时分秒
size?: String;
labelWidth?: String;
}>();
</script>
<!-- 父组件列表 -->
<template>
<div class="create-list p10">
<div class="content background-shadow p15">
<MySearch
v-bind="{
searchForm,
options,
}"
@buttonClick="query"
class="mb10"
/>
<myTable
v-bind="{
tableData,
}"
>
<el-table-column
v-for="(item, index) in column"
:key="index"
:label="item.label"
:prop="item.prop"
>
</el-table-column>
</myTable>
</div>
</div>
</template>
<script lang="ts" setup>
import { reactive, ref, watch, onMounted } from 'vue';
const tableData = ref([]); //列表数据
const searchForm: any = [
{
type: 'Input',
prop: 'number',
label: '编号',
value: '',
},
{
type: 'Input',
prop: 'name',
label: '名称',
value: '',
},
{
type: 'DateTime',
prop: 'time',
label: '时间',
value: '',
timeType: 'daterange',
valueFormat: 'YYYY-MM-DD',
},
{
type: 'Select',
prop: 'type',
label: '类型',
value: '',
},
];
const options: any = [
{
value: '01',
label: '投资',
},
{
value: '02',
label: '备案',
},
];
const column = [
{
prop: 'taskId',
label: '批号',
},
{
prop: 'state',
label: '节点',
},
{
prop: 'beginTime',
label: '时间',
},
];
onMounted(() => {
getTableData();
});
const getTableData = () => {
let params = {
projectNumber: searchForm[0].value, //编号
};
project(params).then((res) => {
console.log('res', res);
if (res && res.code == '200') {
tableData.value = res.data.data;
}
});
};
</script>
你提供的代码中,我也没见任何地方有对 searchForm 中的 value 赋值,所以没赋值这么可能会回显?