Vue.js - Element UI - Form item label slot

Question

I would like to know how to use Form Element Slot with vue.js 2.3 and element-ui. Documentaton here. So I can insert html for the label of my form.

I tried this on jsfiddle here.

Problem

Unknown custom element: el-form-item-slot

Question

What is the proper way to implement that? The documentation is not clear on this topic

Answer 1

The way to specify content to use in a component's slot is by adding the slot attribute to an element within the tag for that component.

In your case, you want to specify an element to go in the the label slot for the el-form-item component. You could do something like this:

<el-form-item label="temp">
  <span slot="label">Label for the slot</span>
  <el-input v-model="formLabelAlign.name"></el-input>
</el-form-item>

Notice, I did have to also provide a label attribute (with value "temp") to the component tag itself. This might be a bug or it might be a required (and poorly documented) fallback value.

Here's a working fiddle.