elementUI 文本域定义

在 Element UI 中，文本域可以使用 el-input 和 el-form-item 组件结合使用来实现。el-input 组件用于输入文本内容，el-form-item 组件用于包裹 el-input 组件，并提供表单验证和布局控制等功能。

下面是一个使用 el-input 和 el-form-item 组件创建文本域的例子：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="介绍" prop="intro">
      <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 6 }" v-model="form.intro"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        intro: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          console.log(this.form);
        } else {
          console.log('表单验证失败！');
          return false;
        }
      });
    }
  }
}
</script>

上面的例子中，使用 el-form-item 包裹 el-input，其中 name 字段使用了默认的单行输入框，intro 字段通过设置 type 为 textarea 实现了多行文本域。同时，也可以通过设置 autosize 属性实现自适应高度的文本域。

需要注意的是，使用 el-form-item 包裹 el-input 后，需要设置 prop 属性来与表单验证相关联。在 submitForm 方法中，使用 this.$refs.form.validate() 对表单进行验证，如果验证通过，则提交表单数据，否则不提交并提示验证失败。