前端使用js在el-input中生成模板，并且可以换行显示

在前端开发中，如果你想要在Element UI (简称El-Input) 中创建可换行显示的自定义内容，你可以利用JavaScript和HTML模板字符串结合使用。El-Input是一个富文本输入组件，但它本身并不支持直接的多行文本展示，但你可以通过一些技巧实现。

首先，你需要在HTML结构上设置一个`<el-input>`元素，然后添加一个`v-model`绑定到一个变量，这个变量将用于存储你要渲染的内容：

<template>
  <div>
    <el-input v-model="customContent" placeholder="请输入内容"></el-input>
    <pre>{{ customContent | newlineToBr }}</pre> <!-- 使用管道转换函数 -->
  </div>
</template>

接下来，在你的JavaScript里，定义一个名为`newlineToBr`的过滤器函数，该函数接收一个字符串作为输入，当遇到换行符`\n`时，插入一个HTML `<br>`标签：

<script>
export default {
  data() {
    return {
      customContent: '',
    };
  },
  filters: {
    newlineToBr(value) {
      return value.replace(/\n/g, '<br>');
    },
  },
};
</script>

现在当你在`el-input`中输入内容并包含换行符，`pre`标签会自动转义换行并以换行的形式显示出来。记得在实际项目中，这样的处理可能会因为复杂内容的处理而变得不够稳定，比如样式问题等，可能需要额外处理。