el-table列表，搜索条件遍历出多个input框（子组件），el-input里的v-model为啥不能回显？

Question

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>

Answer 1

你提供的代码中，我也没见任何地方有对 searchForm 中的 value 赋值，所以没赋值这么可能会回显？