今天在开发页面的时候，遇到一个限制文本域输入行数的，我用的是el-input，将type设置成textarea，就相当于HTML里的textarea标签了，去找了一下textarea的属性，仅有一个rows和cols来控制行和列，然写上之后的效果是控制多少行显示滚动条的，如图，我设置的是:rows="3"，也就是当我输入了3行之后，在输入就会出现右侧的滚动条，这并不是我想要的最多只能输入多少行。

按照我的想法是获取到文本域的行数进行判断的，如果rows大于6就不能在输入了，然而无论是网上搜到的还是自己写的都失败了，最后采用了watch监听的方式，通过\n可以监听到换行了多少，也就能获取到文本域有多少行，然后再进行判断就好弄了。我写的有点问题，最后还是找到了一个大神的文章才实现的（涉及一行代码的正则表达式，啊，我看不懂，不过实现我想要的效果就值得推荐，如有问题，请各位大神不吝赐教），效果如下：

我设置的是最多输入6行，为了测试方便，实际上我的需求是要20行的，提示信息不一致，我就不改了哈。附上代码：

<el-form-item label="新增人员" prop="newPersonnel">
     <el-input 
        type="textarea"
        v-model="绑定的数据"
        :rows="3"
        placeholder="一次最多输入20个，多个换行输入"
        style="width:450px">
     </el-input>
</el-form-item>

methods: {
// 限制新增人员最多输入20个
    getAddRow() {
      let row = 0
      this.绑定的数据.split("\n").forEach(item => {
          if (item.length === 0) {
              row += 1
          } else {
              row += Math.ceil(item.replace(/[\u0391-\uFFE5]/g,"aa").length / 20)
          }
      })
      return row
    },
},
 watch: {
    '绑定的数据'(newValue, oldValue) {
      if (this.getAddRow() > 6) {
        this.绑定的数据 = oldValue
        this.$message({
          message: '一次最多输入6个',
          type: 'warning'
        });
      }
    },
}

如果哪位大佬哥哥可以解答一下代码，我会非常非常开心的，呜呜呜~

row += Math.ceil(item.replace(/[\u0391-\uFFE5]/g,"aa").length / 20)