`<el-form-item>` 组件内 `<el-input>` 使用 `slot='append'` 不生效的问题可能由多种原因导致，以下是常见原因及对应的解决方案。 ### Vue 版本问题 在 Vue 2 中使用 `slot` 属性，而在 Vue 3 中需要使用 `v-slot` 或 `#` 语法。 #### Vue 2 示例 ```vue <template> <el-form> <el-form-item> <el-input v-model="form.nhAge" placeholder="请输入年纪"> <template slot='append'>岁</template> </el-input> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { nhAge: '' } }; } }; </script> ``` #### Vue 3 示例 ```vue <template> <el-form> <el-form-item> <el-input v-model="form.nhAge" placeholder="请输入年纪"> <template #append>岁</template> </el-input> </el-form-item> </el-form> </template> <script setup> import { ref } from 'vue'; const form = ref({ nhAge: '' }); </script> ``` ### ElementUI 或 ElementPlus 版本不兼容问题 确保使用的 ElementUI 或 ElementPlus 版本与 Vue 版本兼容。如果使用的是 Vue 2，应使用 ElementUI；如果使用的是 Vue 3，则需使用 ElementPlus。 ### CSS 样式冲突问题 检查是否有 CSS 样式影响了 `append` 插槽的显示。可以通过浏览器开发者工具查看元素的样式，确保没有意外的样式覆盖。例如，可能存在 `display: none` 或 `visibility: hidden` 这样的样式。 ### 组件引入问题 确保 `el-form`、`el-form-item` 和 `el-input` 组件都已正确引入和注册。在 Vue 项目中，全局引入示例如下： #### Vue 2 + ElementUI ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` #### Vue 3 + ElementPlus ```javascript import { createApp } from 'vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; import App from './App.vue'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ```