Vuetify 2.6.14：如何让v-stepper-items中所有v-textarea始终多行显示？

在Vuetify 2.6.14中，v-stepper-items里的未激活步骤会因为组件的延迟渲染或DOM处理逻辑，导致其中的v-textarea无法默认保持多行状态，只有页面加载时激活的步骤能正常显示多行。以下是几种解决方法：

方法1：显式设置rows属性 #

给每个v-textarea指定固定行数，让组件直接以多行形态渲染，不受激活状态影响：

<v-stepper-items>
  <v-stepper-content step="1">
    <v-textarea rows="4" label="步骤1输入框"></v-textarea>
  </v-stepper-content>
  <v-stepper-content step="2">
    <v-textarea rows="4" label="步骤2输入框"></v-textarea>
  </v-stepper-content>
</v-stepper-items>

方法2：关闭步进器的懒加载 #

如果你的v-stepper启用了lazy属性，移除该属性，让所有步骤的DOM在页面加载时就完全渲染完成，避免组件初始化延迟：

<!-- 移除lazy属性，确保所有步骤DOM提前渲染 -->
<v-stepper v-model="activeStep">
  <v-stepper-header>
    <!-- 步进器头部内容 -->
  </v-stepper-header>
  <v-stepper-items>
    <!-- 步骤内容 -->
  </v-stepper-items>
</v-stepper>

方法3：用CSS强制textarea样式 #

如果前两种方法无效，直接通过CSS强制所有v-textarea的底层文本框保持多行高度：

/* 在组件样式或全局样式中添加 */
.v-textarea textarea {
  min-height: 100px; /* 根据需求调整最小高度 */
  resize: vertical; /* 可选，允许用户手动调整高度 */
}

方法4：手动初始化所有textarea #

在组件挂载或步骤切换时，手动设置所有textarea的行数属性，确保状态一致：

export default {
  data() {
    return {
      activeStep: 1
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.setAllTextareaRows()
    })
  },
  watch: {
    activeStep() {
      this.$nextTick(() => {
        this.setAllTextareaRows()
      })
    }
  },
  methods: {
    setAllTextareaRows() {
      document.querySelectorAll('.v-textarea textarea').forEach(el => {
        el.setAttribute('rows', '4')
      })
    }
  }
}

以上方法任选其一即可解决问题，确保所有v-textarea无论所在步骤是否激活，都能保持多行显示。

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