element-plus组件库改造【2】 el-form表单点击label标签，触发表单控件响应

做项目碰到一个bug，如下图所示：

问题描述：

点击el-form-item上的label区域（如图中：点击所属设备），会触发输入框的聚焦事件

影响：

不符合产品预期，用户随意误点击，会带出不必要的页面交互

一开始也没有头绪，不知道为什么会这么神奇，查阅文档之后才明白这是element-plus组件库自身自带的，话不多说，直接放图

看到这里估计你也就该明白了

问题原因：

label 元素本身不会向用户呈现任何特殊效果。不过，element-plus组件库为鼠标用户改进了可用性。如果在 label 元素内点击文本，就会触发此控件。简而言之，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。根本原因：label标签的“for”属性表单控件“id”绑定了相同的值。

解决方法：

要实现点击label标签，表单控件不进行响应，可在使用FormItem的for属性进行修改label标签原生的for属性。
关键：将for绑到一个没用的控件  :for="'xxxxxx'"

示例代码如下：

<el-form-item label="标签名称" :for="'xxxxx'">
  <el-input
    @click.stop="selectWorkReportNo"
    class="suffix-more"
    placeholder="请选择"
    v-model="ruleForm.workReportNo"
    readonly
    :suffix-icon="() => '···'"
    ></el-input>
</el-form-item>

好了，到这bug就解决啦！！！！！！！