Design Vue 的from表单中label文本换行

最新推荐文章于 2024-06-27 10:29:55 发布

不明不灭

最新推荐文章于 2024-06-27 10:29:55 发布

阅读量1.8k

点赞数 2

分类专栏： vue 文章标签： vue.js javascript 前端前端框架 anti-design-vue

本文链接：https://blog.csdn.net/qq_41922291/article/details/131171402

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Design Vue 的from表单中label文本换行

label文本换行

// 表单中的输入框
<a-col :span="12">
  <a-form-model-item
    :labelCol="labelCol"
    :wrapperCol="wrapperCol"
    prop="yearFinishSituation"
    label="年度完成情况">
  <a-input v-model="from.completionaStatus" style="width: 50%" />
  </a-form-model-item>
</a-col>

// 定义的属性(修改宽度和行高)
data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
        style: 'width: 26%; line-height: 20px; white-space: normal',
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
    }
  },