Vue+elementUI form question, why click on the label tag, the form control will also respond?

problem description

to do is a row of two form items, separated with el-row, el-col, found that click on the label text in front of the form item, the form item will also get the focus, tried a variety of methods, did not figure out what the reason is, find out the previous code comparison of other items, almost the same form, one click on the label does not respond, one will respond

related codes

<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>

although it does not affect the function, but as an obsessive-compulsive disorder, people who like to click the mouse randomly on the page, randomly click the page on a variety of jumps, coupled with the verification is a red, simply can not bear ah!

May.06,2022

This is the property defined by

label. Click label and the focus automatically shifts to its corresponding form control, which is a feature.

label  label 

as to why you used it before but not now, maybe you can remove the prop of the label= product called "prop=" productShortName for short. Just don't specify whose label it is, so it won't focus automatically, I didn't try, just provide an idea.

Menu