🐛 [Bug]: form组件使用复杂布局，设置不同的size时，select的高度不一致

[Lymanli]

Version

3.19.0

Vue Version

3.4.27

Link to minimal reproduction

<template>
  <div class="demo-form">
    size值：{{formSize}}
    <tiny-button @click="setSize('small')">small</tiny-button>
    <tiny-button @click="setSize('medium')">medium</tiny-button>
    <tiny-button @click="setSize('mini')">mini</tiny-button>
    <tiny-button @click="setSize(null)">null</tiny-button>
    <hr/>
    <h2>
      demo1
    </h2>
    <tiny-form ref="ruleFormRef" :model="createData" label-width="100px" :size="formSize" >
      <tiny-row>
        <tiny-col :span="4">
          <tiny-form-item label="下拉多选" prop="users" validate-position="top-end">
            <tiny-select v-model="createData.select" placeholder="请选择" multiple>
              <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
              </tiny-option>
            </tiny-select>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="下拉单选" prop="users" validate-position="top-end">
            <tiny-select v-model="createData.selectMult" placeholder="请选择">
              <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
              </tiny-option>
            </tiny-select>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="下拉单选" prop="users" validate-position="top-end">
            <tiny-select v-model="createData.selectMult" placeholder="请选择">
              <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
              </tiny-option>
            </tiny-select>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="必填" prop="users" validate-position="top-end">
            <tiny-checkbox-group v-model="createData.checked">
              <tiny-checkbox label="复选框1"></tiny-checkbox>
              <tiny-checkbox label="复选框2"></tiny-checkbox>
            </tiny-checkbox-group>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="URL" prop="url">
            <tiny-checkbox-group v-model="createData.checked">
              <tiny-checkbox label="复选框1"></tiny-checkbox>
              <tiny-checkbox label="复选框2"></tiny-checkbox>
            </tiny-checkbox-group>
          </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <hr/>
      <h2>
        demo2
      </h2>
      <tiny-row>
        <tiny-col :span="4">
          <tiny-form-item label="下拉多选" prop="users" validate-position="top-end">
            <tiny-select v-model="createData.select" placeholder="请选择" multiple>
              <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
              </tiny-option>
            </tiny-select>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="下拉单选" prop="users" validate-position="top-end">
            <tiny-select v-model="createData.selectMult" placeholder="请选择">
              <tiny-option v-for="item in selectOptions" :key="item.value" :label="item.label" :value="item.value">
              </tiny-option>
            </tiny-select>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="必填" prop="users" validate-position="top-end">
            <tiny-checkbox-group v-model="createData.checked">
              <tiny-checkbox label="复选框1"></tiny-checkbox>
              <tiny-checkbox label="复选框2"></tiny-checkbox>
            </tiny-checkbox-group>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="URL" prop="url">
            <tiny-checkbox-group v-model="createData.checked">
              <tiny-checkbox label="复选框1"></tiny-checkbox>
              <tiny-checkbox label="复选框2"></tiny-checkbox>
            </tiny-checkbox-group>
          </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <hr/>
      <tiny-row>
        <tiny-col :span="12">
          <tiny-form-item label="整行文本">
            <tiny-input v-model="createData.textarea" type="textarea" maxlength="15"></tiny-input>
          </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <tiny-row>
        <tiny-col :span="12">
          <tiny-form-item>
            <tiny-button type="primary"> 提交 </tiny-button>
          </tiny-form-item>
        </tiny-col>
      </tiny-row>
    </tiny-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Form as TinyForm, FormItem as TinyFormItem, Input as TinyInput, DatePicker as TinyDatePicker, Button as TinyButton, Row as TinyRow, Col as TinyCol, Checkbox as TinyCheckbox, CheckboxGroup as TinyCheckboxGroup, Select as TinySelect, Option as TinyOption } from '@opentiny/vue'

const ruleFormRef = ref()
const createData = reactive({
  users: '',
  url: '',
  email: '',
  datepicker: '',
  textarea: ''
})
const selectOptions = ref([
  {
    value: '选项1',
    label: '黄金糕'
  },
  {
    value: '选项2',
    label: '双皮奶'
  },
  {
    value: '选项3',
    label: '蚵仔煎'
  }
])
const formSize=ref('')
const setSize=v=>{
  formSize.value=v
}
</script>

<style scoped>
.demo-form {
}
</style>

Step to reproduce

默认下，demo1、demo2的下拉框高度一致，在复杂布局下按顺序排列。

依次点击按钮small、medium、mini、null修改form的size值，form在small和mini下：

1. demo1中，下拉多选框高度比下拉单选框要高，必选复选框卡在第一个下拉单选框下面；

2. demo2中，下拉单选框比复选框要高，URL复选框卡在必选复选框下面；

What is expected

form的size值在small和mini下，表单组件的高度保持一致，组件按顺序排列左边不留空白。

What is actually happening

form的size值在small和mini下，组件高度：下拉多选框>下拉单选框>复选框。

What is your project name

form表单

Any additional comments (optional)

No response

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

Title: 🐛 [Bug]: The form component uses a complex layout. When setting different sizes, the height of the select is inconsistent.

[gimmyhehe]

@Lymanli 此问题是由于select组件配置了多选后，在动态切换size时，高度没有随之动态修改导致的。 目前正在商议解决方案，可以暂时给多选select组件配置一下key临时规避此问题~

[Issues-translate-bot]

Bot detected the issue body's language is not English, translate it automatically.

---

@Lymanli This problem is caused by the fact that after the select component is configured with multiple selections, the height is not dynamically modified when the size is dynamically switched. We are currently discussing a solution. You can temporarily configure the key for the multi-select select component to temporarily avoid this problem~