opentiny / tiny-vue

TinyVue is an enterprise-class UI component library of OpenTiny community, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.
https://opentiny.design/tiny-vue
MIT License
1.66k stars 264 forks source link

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

Open Lymanli opened 1 day ago

Lymanli commented 1 day ago

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中,下拉多选框高度比下拉单选框要高,必选复选框卡在第一个下拉单选框下面; image

  2. demo2中,下拉单选框比复选框要高,URL复选框卡在必选复选框下面; image

What is expected

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

What is actually happening

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

image

What is your project name

form表单

Any additional comments (optional)

No response

Issues-translate-bot commented 1 day ago

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.