element的select下拉选择和输入和改变表单校验星号的对齐方式

最新推荐文章于 2025-07-01 07:41:48 发布

原创最新推荐文章于 2025-07-01 07:41:48 发布 · 206 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

select下拉选择和输入用的是element官网中select的创建条目，如果要让输入的内容在鼠标失去焦点时显示，可以用到select中的blur、change和input方法

@input="(val) => handleInput(val, index)"

@blur="(e) => selectBlur(e, index)"

@change="(val) => selectChange(val, index)"

点击加号和减号：

addPoliceInput() {

// 在数组中添加一个新的空字符串，动态添加新的输入框

this.policesList.push({ policeName: "", policeNumber: "" });

},

delPoliceInput(index) {

this.policesList.splice(index, 1);

},

表单检验中星号的对齐方式，文字和字对齐，让星号突出来：

.el-form-item__label {

position: relative; /* 设置相对定位作为星号的定位基准 */

text-align: justify;

padding-left: 10px; /* 为星号预留空间 */

}

.el-form-item__label:before {

position: absolute;

left: 0; /* 星号定位到标签最左侧 */

top: 0; /* 调整垂直位置以适应行高 */

}

select下拉选择的完整代码：

<div class="add_police">
    <el-form-item
      label="处理交警："
      :rules="[
        {
          required: true,
          message: '请输入交警姓名',
          trigger: 'blur',
        },
      ]"
    >
      <div
        v-for="(police, index) in policesList"
        :key="index"
        class="police_input flex"
      >
        <el-select
          popper-class="popper-class"
          v-model="policesList[index].policeName"
          clearable
          filterable
          allow-create
          default-first-option
          placeholder="请输入或选择"
          @input="(val) => handleInput(val, index)"
          @blur="(e) => selectBlur(e, index)"
          @change="(val) => selectChange(val, index)"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="item in policeOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          size="mini"
          v-model="policesList[index].policeNumber"
          :placeholder="'请输入警号 ' + (index + 1)"
        ></el-input>
        <div
          class="btn_del"
          v-show="index > 0"
          @click="delPoliceInput(index)"
        ></div>
      </div>
    </el-form-item>
    <div class="btn_add" @click="addPoliceInput"></div>
  </div>
policesList: [
  {
    policeName: "",
    policeNumber: "",
  },
],
// 不依赖blur的e.target.value，blur 事件在触发时，e.target 指向的是 el-select 的 DOM 节点，而不是具体的输入框。e.target.value 可能为空或未定义。
// 实时监听输入值
handleInput(val, index) {
  this.policesList[index].policeName = val; // 实时同步
},
// 如果必须在 blur 中处理，确保使用 $nextTick
selectBlur(e, index) {
  this.$nextTick(() => {  // 同步数据
    this.policesList[index].policeName = e.target.value;
  });
},
// 确保选中值同步
selectChange(val, index) {
  this.policesList[index].policeName = val; // 直接从 change 中获取值
},
addPoliceInput() {
  // 在数组中添加一个新的空字符串，动态添加新的输入框
  this.policesList.push({ policeName: "", policeNumber: "" });
},
delPoliceInput(index) {
  this.policesList.splice(index, 1);
},