vue+js+elementUi文本框最多10行，每一行限制10个字就只能输入10个字，写的深入一点

要实现这个需求，我们需要结合 Vue、JavaScript 和 ElementUI 的相关知识。

首先，在 ElementUI 中，我们可以使用 el-textarea 组件来实现文本框的显示。在 el-textarea 中，我们可以设置 rows 属性来控制文本框的行数，最多只能有 10 行。同时，我们还需要设置 maxlength 属性来限制每一行最多只能输入 10 个字符。

接下来，需要在 Vue 中监听文本框的输入事件，当用户输入时，我们需要计算文本框中的行数和每一行的字符数，然后根据需求对输入进行限制。这里可以使用计算属性来实现，通过计算 textarea 的值，即可得到当前文本框中的行数和每一行的字符数。

最后，我们可以在模板中使用 v-model 指令来绑定文本框的值，确保用户输入的内容能够正确地保存到数据模型中。

下面是一个简单的示例代码：

<template>
  <el-textarea
    v-model="content"
    :rows="maxRows"
    :maxlength="maxChars"
    @input="handleInput"
  ></el-textarea>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      maxRows: 10,
      maxChars: 10,
    };
  },
  computed: {
    // 计算文本框行数
    rows() {
      return this.content.split('\n').length;
    },
    // 计算每行字符数
    charsPerLine() {
      return this.content.split('\n').reduce((max, line) => {
        return Math.max(max, line.length);
      }, 0);
    },
  },
  methods: {
    // 处理输入事件
    handleInput() {
      if (this.rows > this.maxRows) {
        // 超过最大行数，截取前面的内容
        this.content = this.content
          .split('\n')
          .slice(0, this.maxRows)
          .join('\n');
      } else if (this.charsPerLine > this.maxChars) {
        // 超过最大字符数，截取前面的字符
        this.content = this.content.slice(0, this.maxRows * this.maxChars);
      }
    },
  },
};
</script>