Iview的label标签中添加空格问题

最新推荐文章于 2024-02-23 15:50:46 发布

原创最新推荐文章于 2024-02-23 15:50:46 发布 · 6.3k 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#iview #空格 #空格显示

前端爬坑专栏收录该内容

3 篇文章

订阅专栏

本文介绍两种在iView表单Label中添加多个空格的方法：使用全角空格实现简单快速的格式调整；利用JS字符串及UTF-8编码中的xa0输出空格，适用于更复杂的格式需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在iview的label属性中添加空格时，如果直接加空格就会只显示一个，用\n这些也不是很好用，下面介绍两种方式来在label中添加空格。

方法一：

全角空格方法，就是在输入空格之前将输入法的半/全角设置为全角，这样输入的空格就是中文空格，会自己识别出来，不过这种方法需要注意的是一个空格相当于一个汉字，所以调格式的话可能会存在不能对齐的情况。

方法二：

通过将标签设置为变量的方法，用js字符串来定义标签，此时如果用/n也是不好用的，一般都会选择utf-8的编码格式，在这种编码格式下可以用\xa0来输出空格。

示例：

表单中


<Form-item :label="label.name" prop="name" class="person-form-item">
  <Input v-model="personForm.name" placeholder="请输入姓名" :readonly="disable"></Input>
</Form-item>

数据定义

export default {
data(){
  return{
    label:{
       name:"姓"+ '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0' +"名",
    }
}
}