🐛 [Bug]: form表单使用row、col进行复杂布局时，form-item中的表单组件高度不统一

Lymanli commented 1 month ago

Version

3.16.0

Vue Version

3.4.27

Link to minimal reproduction

https://opentiny.design/vue-playground?cmpId=form&fileName=form-row-col.vue&apiMode=Options&mode=pc&theme=default

<template>
  <div class="demo-form">
    <tiny-row>
      <tiny-col>
        <tiny-button @click="changeSize">切换size</tiny-button>
      </tiny-col>
      <tiny-col>form size: {{size ? '' : 'mini'}}</tiny-col>
    </tiny-row>
    <hr >
    <tiny-form ref="ruleFormRef" :model="createData" :size="size ? '' : 'mini'" label-width="80px" validate-type="text">
      <tiny-row>row 1</tiny-row>
      <tiny-row>
        <tiny-col :span="4">
          <tiny-form-item label="checkbox" prop="datepicker" >
            <tiny-checkbox-group v-model="createData.datepicker" :options="options"></tiny-checkbox-group>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="input" prop="users" >
            <tiny-input v-model="createData.users"></tiny-input>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="popeditor" prop="email">
            <tiny-popeditor v-model="createData.email" :gridOp="gridOp" text-field="name" value-field="id"></tiny-popeditor>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="numeric" prop="url">
            <tiny-numeric v-model="createData.url"></tiny-numeric>
          </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <hr />
      <tiny-row>row 2</tiny-row>
      <tiny-row>
        <tiny-col :span="4">
          <tiny-form-item label="popeditor" prop="email">
            <tiny-popeditor v-model="createData.email" :gridOp="gridOp" text-field="name" value-field="id"></tiny-popeditor>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="input" prop="users" >
            <tiny-input v-model="createData.users"></tiny-input>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="checkbox" prop="datepicker" >
            <tiny-checkbox-group v-model="createData.datepicker" :options="options"></tiny-checkbox-group>
          </tiny-form-item>
        </tiny-col>
        <tiny-col :span="4">
          <tiny-form-item label="numeric" prop="url">
            <tiny-numeric v-model="createData.url"></tiny-numeric>
          </tiny-form-item>
        </tiny-col>
      </tiny-row>
      <hr />
    </tiny-form>
  </div>
</template>

<script>
import { Form, FormItem, Input, DatePicker, Button, Row, Col, Numeric, Popeditor, CheckboxGroup } from '@opentiny/vue'

const dataset = [
  {
    id: "1",
    name: "GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司GFD科技YX公司",
    city: "福州",
    province: "福建"
  },
  {
    id: "2",
    name: "WWW科技YX公司",
    city: "深圳",
    province: "广东"
  },
  {
    id: "3",
    name: "RFV有限责任公司",
    city: "中山",
    province: "广东"
  },
  {
    id: "4",
    name: "TGB科技YX公司",
    city: "龙岩",
    province: "福建"
  },
  {
    id: "5",
    name: "YHN科技YX公司",
    city: "韶关",
    province: "广东"
  },
  {
    id: "6",
    name: "WSX科技YX公司",
    city: "黄冈",
    province: "武汉"
  },
  {
    id: "7",
    name: "KBG物业YX公司",
    city: "赤壁",
    province: "武汉"
  },
  {
    id: "8",
    name: "深圳市福德宝网络技术YX公司",
    province: "广东",
    city: "深圳"
  },
  {
    id: "9",
    name: "KBG物业YX公司",
    city: "赤壁",
    province: "武汉"
  },
  {
    id: "10",
    name: "深圳市福德宝网络技术YX公司",
    province: "广东",
    city: "深圳"
  }
];
export default {
  components: {
    TinyForm: Form,
    TinyFormItem: FormItem,
    TinyInput: Input,
    TinyDatePicker: DatePicker,
    TinyButton: Button,
    TinyRow: Row,
    TinyCol: Col,
    TinyNumeric: Numeric,
    TinyPopeditor: Popeditor,
    TinyCheckboxGroup: CheckboxGroup
  },
  data() {
    return {
      createData: {
        users: '',
        url: '',
        email: '',
        datepicker: [],
        textarea: ''
      },
      size: true,
            options: [
          {
            label: "1",
            text: "男"
          },
          {
            label: "0",
            text: "女"
          }
        ],
      gridOp:{
        columns: [
          {
            field: "id",
            title: "ID",
            width: 40
          },
          {
            field: "name",
            title: "名称",
            showOverflow: "tooltip"
          },
          {
            field: "province",
            title: "省份",
            width: 80
          },
          {
            field: "city",
            title: "城市",
            width: 80
          }
        ],
        data: dataset
      }
    }
  },
  methods:{
    changeSize() {
      this.size = !this.size;
    }
  }
}
</script>

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

Step to reproduce

点击‘切换size’按钮时，form会切换不同的size值

What is expected

在form设置不同的size值时，form-item中的表单组件高度保持一致，不会出现组件前面留空的情况

What is actually happening

form在同一个size值下，form-item中的表单组件高度不统一。
- 如size为空字符串时的row 1

在同size值下的两个组件可能高度相同，但切换size后高度就不相同了
- 如size值由空字符串改为mini，row 2的变化

What is your project name

form+row、col的复杂布局

Any additional comments (optional)

No response

Issues-translate-bot commented 1 month ago

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

Title: 🐛 [Bug]: When the form uses row and col for complex layout, the height of the form components in form-item is not uniform.

gimmyhehe commented 1 month ago

@Lymanli 根据复现demo定位，是由于checkbox在mini size的情况下，高度与其他表单项不一致，导致了col排版错乱。组件库会调整一下checbox在mini size的情况下的高度