如何使用Vue Bootstrap在lable旁边添加图标

Question

我有一个vue引导输入字段：

<b-form-group label="Name" label-for="name">
<validation-provider
    #default="{ errors }"
    name="Mapping Name"
    rules="required"
>
    <b-form-input
        v-model="mappingData.mapping_name"
        :state="errors.length > 0 ? false : null"
        id="mappingName"
        placeholder="Enter a maping name"
    />
    <small class="text-danger">{{ errors[0] }}</small>
</validation-provider>
</b-form-group>

输出如下所示：

​

​

现在，在(名称的右侧) name 标签旁边添加一个图标，即：

<feather-icon
    icon="AlertCircleIcon"
    class="mr-50 my-icon"
    v-b-tooltip.hover.top="'Some tooltip text'"
/>

为此，我在：<b-form-group label="Name" label-for="name">之后添加了以下内容。现在看起来是这样的：

​

​

但是它应该在名称标签旁边。

有办法这样做吗？

Answer 1

是。您可以这样使用模板槽的B形群标签：

<b-form-group label-for="name">
              <validation-provider
                #default="{ errors }"
                name="Mapping Name"
                rules="required"
              >
                <template slot="label">
                  Name
                  <feather-icon
                    v-b-tooltip.hover.top="'Some tooltip text'"
                    icon="AlertCircleIcon"
                    class="mr-50 my-icon"
                  />
                </template>
                <b-form-input
                  v-model="mappingData.mapping_name"
                  :state="errors.length > 0 ? false : null"
                  id="mappingName"
                  placeholder="Enter a maping name"
                />
                <small class="text-danger">{{ errors[0] }}</small>
              </validation-provider>
            </b-form-group>