### 如何在 Vue.js 中提取 Element UI `el-form` 组件的所有 label 文本 为了从 `el-form` 组件中提取所有的 `label` 文本，可以通过以下方式实现： #### 方法一：通过 DOM 查询获取 Label 文本 可以利用原生 JavaScript 或者 Vue 提供的 `$refs` 和模板编译后的结构来访问 DOM 节点。 以下是具体的代码示例： ```javascript methods: { getLabelsFromDOM() { const labels = this.$el.querySelectorAll('.el-form-item__label'); // 获取所有 .el-form-item__label 元素 const labelTexts = Array.from(labels).map(label => label.textContent.trim()); // 提取文本并去除多余空白字符 console.log('Label Texts:', labelTexts); return labelTexts; } } ``` 这种方法依赖于 `.el-form-item__label` 类名的存在，这是由 Element UI 自动生成的类名[^1]。如果未来版本更新可能导致此类名变化，则需重新确认。 --- #### 方法二：通过自定义属性绑定标签名称到父级对象 可以在渲染 `el-form-item` 时，将每个 `label` 的值存储在一个数组中以便后续调用。 例如，在子组件中传递数据的同时记录下来： ```html <template> <el-form> <el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label"> <!-- 表单项内容 --> </el-form-item> </el-form> </template> <script> export default { data() { return { formItems: [ { label: '姓名', prop: 'name' }, { label: '邮箱', prop: 'email' } ], collectedLabels: [] // 存储收集到的 Labels }; }, mounted() { this.collectLabels(); }, methods: { collectLabels() { this.collectedLabels = this.formItems.map(item => item.label); // 收集所有 label 值 console.log('Collected Labels:', this.collectedLabels); } } }; </script> ``` 这种方式更加灵活可控，并且不直接操作 DOM[^2]。 --- #### 方法三：使用插槽扩展功能 当某些复杂场景下需要动态生成带提示信息的 `label`（如引用中的工具提示），也可以借助插槽机制完成更复杂的逻辑[^3]。 例如： ```html <el-form-item> <span slot="label"> 姓名 <el-tooltip content="这里是额外说明文字" placement="top"> <i class="el-icon-question"></i> </el-tooltip> </span> </el-form-item> ``` 在这种情况下，仍然可以通过方法二的方式预先保存原始 `label` 数据用于其他用途。 --- #### 总结 以上三种方案分别适用于不同需求层次的应用开发环境。对于简单的只读型应用可以选择 **方法一**；而对于高度定制化或者性能敏感型项目推荐采用 **方法二** 来减少不必要的计算开销以及增强维护性[^4]。