一行只能10个字，多了不让展示，还得提示该换行了

好的，那我们可以使用 JavaScript 来实现这个限制和提示的逻辑。

首先，我们需要监听文本框的输入事件，通过 `input` 事件来实现。在事件处理函数中，我们可以获取当前文本框中的内容，然后判断是否超过了一行的限制。

如果超过了一行的限制，我们需要将多余的字符去除，再将换行符插入到合适的位置。同时，我们还需要在界面上给出提示，让用户知道已经超过了一行的限制。

下面是一份示例代码，供您参考：

<template>
  <div>
    <el-input
      ref="input"
      type="textarea"
      :rows="10"
      v-model="text"
      @input="handleInput"
      show-word-limit
    ></el-input>
    <p v-show="showTip" style="color: red">
      已超过一行限制，请换行输入！
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      showTip: false
    };
  },
  methods: {
    handleInput() {
      const input = this.$refs.input.$el.querySelector(".el-textarea__inner");
      const lineHeight = parseFloat(getComputedStyle(input).lineHeight);
      const maxCharsPerLine = Math.floor(input.clientWidth / lineHeight);
      const lines = this.text.split("\n");
      const lastLine = lines[lines.length - 1];
      if (lastLine.length > maxCharsPerLine) {
        const charsToCut = lastLine.length - maxCharsPerLine;
        const newLine = lastLine.slice(0, -charsToCut) + "\n";
        this.text = lines.slice(0, -1).concat(newLine).join("\n");
        this.showTip = true;
      } else {
        this.showTip = false;
      }
    }
  }
};
</script>

这段代码中，我们首先在模板中添加了一个用来显示提示的 `<p>` 元素，通过 `v-show` 控制其显示和隐藏。

在方法 `handleInput` 中，我们首先获取当前文本框中每行最多能够输入的字符数，这里使用了一些 DOM 操作来获取文本框的实际尺寸。然后，我们将整个文本框的内容按照换行符 `\n` 进行分割，得到一个数组 `lines`，其中每个元素代表一行的内容。

接着，我们取出最后一行的内容，判断其是否超过了一行的限制。如果超过了，我们就将超出的部分去除，再在合适的位置插入一个换行符。最后，我们将修改过的文本框内容重新赋值给 `text`，并将提示框显示出来。

如果没有超过一行的限制，我们就将提示框隐藏起来。这样，用户就能够在输入时实时看到自己是否超过了一行的限制，以及需要换行的位置。

希望这份代码能够满足您的需求，有任何问题欢迎再次提问。