要处理label过长省略的问题,并且让其全部显示并换行,你可以使用CSS样式来控制标签的宽度和文本溢出的处理方式。

首先,在<a-form-model-item>标签中添加一个自定义的类名,例如label-wrap,用于后续的样式控制。

然后,在CSS中添加以下样式:

.label-wrap label {
  display: block;
  width: 100%;
  word-break: break-all;
  white-space: normal;
}

这样,label标签就会占满整个宽度,并且当文本过长时会自动换行显示。

完整代码如下:

<tr style="height: 80px">
  <td rowspan="1" colspan="5">
    <a-row>
      <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="人力资源是否其他项" prop="isHrOther" class="label-wrap">
          <a-radio-group v-model="mdl.isHrOther" >
            <a-radio value="1">
              是
            </a-radio>
            <a-radio value="0">
              否
            </a-radio>
          </a-radio-group>
        </a-form-model-item>
      </a-col>
      <a-col :span="12">
        <a-form-model-item :labelCol="{span: 8}" :wrapperCol="wrapperCol1" label="人力资源其他" prop="hrOther" style="width: 80%; white-space: nowrap;">
          <a-textarea
            v-model="mdl.hrOther"
            placeholder="请输入人力资源其他"
            :auto-size="{ minRows: 2, maxRows: 6 }"
          />
        </a-form-model-item>
      </a-col>
    </a-row>
  </td>
</tr>
.label-wrap label {
  display: block;
  width: 100%;
  word-break: break-all;
  white-space: normal;
}
在这个前端里 tr style=height 80px td rowspan=1 colspan=5 a-row a-col span=12 a-form-model-i

原文地址: https://www.cveoy.top/t/topic/jgLa 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录