element input框里动态的内容 tooltip怎样实现换行

Question

<el-tooltip :content="formData.ruleForm.orgName" placement="top">
  <el-input
    v-model="formData.ruleForm.orgName"
    placeholder="请输入机构名称"
    @click.native="changeSelectTree1"
    class="selectTree-input"
  ></el-input>
</el-tooltip>

这是我写的代码

Answer 1

<el-tooltip placement="top">
  <div slot="content">第一行tooltip<br/>第二行tooltip</div>
  <el-input
    v-model="formData.ruleForm.orgName"
    placeholder="请输入机构名称"
    @click.native="changeSelectTree1"
    class="selectTree-input"
  ></el-input>
</el-tooltip>

把 el-tooltip 里面的 content 去掉
然后加入用具名 slot 分发content，可以实现多行tooltip
当然，你可以通过计算属性，把 formData.ruleForm.orgName 拆成多行。