V-textarea绑定v-model后内容上下左侧留白过多如何解决？

你的问题主要来自两个方面：字符串内容自带缩进和组件默认样式的内边距，以下是具体解决步骤：

1. 清理内容字符串的多余缩进 #

你初始化content时使用的模板字符串中，每行开头的空格会被保留到最终内容里，导致左侧留白。调整query的写法，去掉不必要的缩进：

if(this.content === ''){
  query = `${prefix}
Select ${this.arrmeasureGabung}
where{
?obs rdf:type qb:Observation ;
${this.arrquerymeasuregabung}.
}`
  this.content = query;
}

如果需要保留代码格式但不想显示左侧留白，可以用正则替换每行开头的缩进：

this.content = query.trim().replace(/^\s+/gm, '');

2. 覆盖组件默认内边距样式 #

Vuetify的v-textarea（尤其是filled样式）默认带有上下左右内边距，通过自定义CSS去除：

修改组件代码，添加自定义类名 #

<v-textarea
  name="input-7-1"
  filled
  auto-grow
  height="500"
  v-model="content"
  class="tight-textarea"
></v-textarea>

添加样式覆盖 #

/* 去除文本区域的内边距 */
.tight-textarea .v-textarea__inner {
  padding: 0 !important;
}

/* 去除filled样式容器的额外内边距 */
.tight-textarea .v-input__control {
  padding: 0 !important;
}

注意事项 #

• 若使用Vue的scoped样式，可通过深度选择器（如::v-deep）确保样式生效，避免依赖!important。
• 开启auto-grow后，去掉内边距会让高度计算更精准，避免内容被截断。

内容的提问来源于stack exchange，提问作者TimotyDev_03