<template slot="label"> <i class="el-icon-user"></i> 员工风貌 </template>不显示汉字

可能是因为模板中的汉字使用了全角标点符号，而 HTML 中只识别半角标点符号。请尝试将模板中的全角标点符号替换为半角标点符号，如下所示：

<template slot="label">
  <i class="el-icon-user"></i>
  员工风貌
</template>

如果还是不显示汉字，请检查当前页面是否引入了正确的字体文件，或者尝试使用其他字体。

相关问题

<template slot="title"><i class="el-icon-setting"></i>历史记录</template> class有哪些类型

在 Vue 的模板语法中，`<template>` 标签可以用于定义组件的模板内容。`<template>` 标签可以包含多个子元素，其中的每个子元素都会被视为模板的一部分。

在你提供的例子中，`<template>` 标签中定义了一个具名插槽（named slot），使用了 `slot="title"` 来命名插槽。插槽允许你在组件的使用者提供内容，然后在组件内部以插槽的形式进行渲染。

关于你提到的 `class`，可能是指在该模板中使用了一个 CSS 类名，例如：

<template slot="title"><i class="el-icon-setting"></i>历史记录</template>

在这个例子中，`<i>` 标签的 `class` 属性被设置为 `"el-icon-setting"`，用于给该元素应用一个 CSS 类。这样可以通过 CSS 来为该元素添加样式。

如果你的问题是关于 JavaScript 中的 `class` 类型，请提供更多上下文信息，以便我可以更好地理解你的问题并给出准确的答案。

代码解释 <template #icon> <i class="iconfont icon-sousuo"></i> </template>

这段代码是 Vue.js 模板语法中用于定义一个具名插槽（named slot）的部分。

具名插槽是一种可重用的模板片段，允许开发者在组件中定义一些可变的内容，然后在使用组件的时候传入具体的内容。

在这个例子中，我们定义了一个名为 "icon" 的插槽。插槽的内容是一个 `<i>` 元素，其中包含一个表示搜索图标的 CSS 类名。这个插槽可以被父组件使用，传入不同的内容，以在不同的上下文中显示不同的图标。

具名插槽的使用方式是在组件模板中使用 `<slot>` 元素，并将其 name 属性设置为对应插槽的名称。例如，在父组件中，我们可以这样使用这个插槽：

<my-component>
  <template #icon>
    <i class="iconfont icon-user"></i>
  </template>
</my-component>

这里，我们使用了一个 `<template>` 元素来定义插槽的内容，并将其放在了组件标签内。在组件内部，我们可以使用 `<slot>` 元素来渲染插槽的内容，如下所示：

<template>
  <button>
    <slot name="icon"></slot>
    Search
  </button>
</template>

这段代码定义了一个按钮组件，并在其中使用了名为 "icon" 的插槽。在插槽的位置，我们使用了 `<slot>` 元素来渲染插槽的内容。如果父组件没有传入具名插槽的内容，那么 `<slot>` 元素将会被忽略，不会产生任何渲染结果。