vue+elementUI表单问题，为什么点击label标签，表单控件也会响应？

Question

问题描述

做的是一行两个表单项，用el-row、el-col分割开，发现点击表单项前面的标签文字，表单项也会获取焦点，尝试了各种方法，都没搞清楚原因是什么，找出以前别的项目的代码对比，几乎一样的表单，一个点击标签没反应，一个就有反应

相关代码

<el-form ref="form1" :model="hangData.baseinfo" :rules="rules" size="mini" label-width="200px"
             :disabled="isDisabled">
        <el-row>
            <el-col :span="12">
                <el-form-item label="产品全称    " prop="productFullName">
                    <el-input id="productFullName" maxlength="100" v-model="hangData.baseinfo.productFullName"
                              auto-complete="off"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="产品代码    " prop="productCode">
                    <el-input id="productCode" maxlength="20" v-model="hangData.baseinfo.productCode" disabled
                              auto-complete="off"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="产品简称    " prop="productShortName">
                    <el-input id="productShortName" maxlength="100" v-model="hangData.baseinfo.productShortName"
                              auto-complete="off"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="业务编号    " prop="productShortName">
                    <el-input id="productBusiCode" maxlength="20" v-model="hangData.baseinfo.productBusiCode"
                              disabled auto-complete="off"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="产品类型    " prop="productType">
                    <el-select id="productType" v-model="hangData.baseinfo.productType" placeholder="请选择">
                        <el-option v-for="item in DictTree.ProductType" :key="item.dictID" :label="item.dictName"
                                   :value="item.dictID">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="本期计划挂牌金额（万元）    " prop="listAmount">
                    <el-input id="listAmount" maxlength="22" v-model="hangData.baseinfo.listAmount"
                              auto-complete="off"></el-input>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="是否首发    " prop="isFp">
                    <el-select id="isFp" v-model="hangData.baseinfo.isFp" placeholder="请选择">
                        <el-option v-for="item in DictTree.COF_YESORNO" :key="item.dictID" :label="item.dictName"
                                   :value="item.dictID">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>

虽然并没有影响到功能，但是作为一个强迫症患者，喜欢在页面上鼠标乱点的人，随便点点页面就乱七八糟的各种跳，加上验证后更是一片红，简直不能忍啊！！！

Answer 1

label定义的属性就是这样的，点击label，焦点就会自动转到其对应的表单控件上，这是个特性。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

至于为什么你之前用没有 现在用就有了，也许你可以把label="产品简称" prop="productShortName"的prop去掉试试？就是不指定它是谁的label，这样就不会自动聚焦了，我没尝试，提供个思路而已。