對element-ui的label和el-tooltip同時使用插槽

我們看element-ui官網可以發現el-tooltip可以使用slot=“content”這個具名插槽來自定義想顯示的文案
如果想要在標籤上顯示這個el-tooltip的話,就必須讓標籤也有個插槽,在這個插槽裏插入el-tooltip這個節點。

      <el-form-item prop="runKey">
             <template slot="label">
                    <span style="position:relative">
                        <span>指數</span>
                        <el-tooltip style="position:absolute;right:-8px;" class="item" effect="dark"  placement="top">
                          <div slot="content">
                            <p>溫馨提示:指數爲每次運動的運動量</p>
                          </div>
                          <i class="el-icon-question table-msg" />
                      </el-tooltip>
                    </span>
            </template>
        <el-input v-model="form.runKey" :disabled="formDisable"></el-input>
    </el-form-item>

效果如下:
指數

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章