Element UI 表单字段提取脚本（用于前端调试）

功能说明

该脚本用于从页面中提取所有 <code>Element UI</code> 表单中的字段标签及其对应组件类型，便于快速识别表单结构。

使用方法

1. 打开开发者工具（F12）。
2. 在控制台（Console）中粘贴并运行以下代码。

代码实现

const allLabels = Array.from(
    document.querySelectorAll('.el-form-item__label')
);

allLabels.forEach(label => {
    const labelText = label.textContent.trim();
    const formItem = label.closest('.el-form-item');
    if (!formItem) return;

    let type = '未知类型';

    // 判断组件类型
    if (formItem.querySelector('textarea.el-textarea__inner')) {
        type = '文本区域 textarea';
    } else if (formItem.querySelector('input.el-input__inner')) {
        const input = formItem.querySelector('input.el-input__inner');
        type = <code>输入框 input[type=${input.type || 'text'}]</code>;
    } else if (formItem.querySelector('.el-select')) {
        type = '下拉选择 el-select';
    } else if (formItem.querySelector('.el-date-editor')) {
        type = '日期选择 el-date-picker';
    } else if (formItem.querySelector('.el-switch')) {
        type = '开关 el-switch';
    } else if (formItem.querySelector('.el-radio-group')) {
        type = '单选 el-radio';
    } else if (formItem.querySelector('.el-checkbox-group')) {
        type = '多选 el-checkbox';
    }

    console.log(<code>${labelText}: ${type}</code>);
});