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 拆成多行。

Answer 2

<el-tooltip placement="top">
  <div slot="content">
    <div v-for="item in result" :key="item"> 
        {{item}}
    </div>
  </div>
  <el-input
    v-model="formData.ruleForm.orgName"
    placeholder="请输入机构名称"
    @click.native="changeSelectTree1"
    class="selectTree-input"
  ></el-input>
</el-tooltip>

let arr = ['中国','伊朗','伊拉克','韩国','日本','朝鲜']
let result = [];
arr.forEach((item, index) => {
    // 这里是用、连接的元素，如果需要别的，自行替换即可
    result[Math.floor(index/3)] = result[Math.floor(index/3)] ? `${result[Math.floor(index/3)]}、${item}` : item;
})