查询窗口输入“ 188 8888 8888 “这种前后、中间都带空格的电话号码的处理方式

---

这里"电话号码"查询条件，需要对输入的"  188   8888   8888  "这种中间带空格的数据也去除所有空格，包括中间的空格，再给后端去做处理进行查询，可通过以下几种方式来实现：

方案一：使用计算属性

在 data() 后面添加 computed 属性

// 在 data() 后面添加 computed 属性

data() {
}，

......

computed: {
  phoneWithoutSpaces() {
    return this.queryParams.phone? this.queryParams.phone.replace(/\s/g, '') : '';
  }
}

然后在模板中使用这个计算属性：

<el-form-item label="电话号码" prop="phone">
  <el-input 
    v-model.trim="queryParams.phone" 
    placeholder="请输入电话号牌" 
    clearable 
    @input="handlephoneInput" />
</el-form-item>

并在 methods 中添加处理函数：

methods: {
  // ... 其他方法
  
  handlephoneInput(value) {
    // 实时去除空格
    if (value) {
      this.queryParams.phone= value.replace(/\s/g, '');
    }
  },
  
  // ... 其他方法
}

方案二：直接在输入时处理（更直接）

修改模板中的输入框：

<el-form-item label="电话号码" prop="phone">
  <el-input 
    :value="queryParams.phone"
    @input="val => queryParams.phone= val ? val.replace(/\s/g, '') : null"
    placeholder="请输入电话号牌" 
    clearable />
</el-form-item>

方案三：在搜索前处理

如果您只需要在搜索时处理空格，可以在 handleQuery 方法中添加处理逻辑：

/** 搜索按钮操作 */
handleQuery() {
  // 处理电话号码中的空格
  if (this.queryParams.phone) {
    this.queryParams.phone= this.queryParams.phone.replace(/\s/g, '');
  }
  
  this.queryParams.pageNum = 1;
  this.getList();
}