VUE +Element怎么实现多个字段值拼接功能

发布时间：2022-04-15 10:20:15 作者：iii
来源：亿速云阅读：968

VUE + Element 怎么实现多个字段值拼接功能

在现代前端开发中，Vue.js 和 Element UI 是两个非常流行的技术栈。Vue.js 是一个轻量级、高效的 JavaScript 框架，而 Element UI 是一个基于 Vue.js 的 UI 组件库，提供了丰富的组件和功能，帮助开发者快速构建美观且功能强大的用户界面。

在实际开发中，我们经常会遇到需要将多个字段的值拼接在一起的需求。例如，用户信息中的“姓”和“名”需要拼接成完整的姓名，或者地址信息中的“省”、“市”、“区”需要拼接成完整的地址。本文将详细介绍如何在 Vue.js 和 Element UI 中实现多个字段值的拼接功能。

1. 需求分析

假设我们有一个用户信息表单，包含以下字段：

姓（lastName）
名（firstName）
省（province）
市（city）
区（district）

我们的目标是将“姓”和“名”拼接成完整的姓名，将“省”、“市”、“区”拼接成完整的地址，并在页面上显示出来。

2. 环境准备

首先，确保你已经安装了 Vue.js 和 Element UI。如果还没有安装，可以通过以下命令进行安装：

# 安装 Vue CLI
npm install -g @vue/cli

# 创建一个新的 Vue 项目
vue create my-project

# 进入项目目录
cd my-project

# 安装 Element UI
npm install element-ui --save

安装完成后，在 main.js 中引入 Element UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3. 创建表单组件

接下来，我们创建一个表单组件 UserForm.vue，用于输入用户信息。

<template>
  <el-form :model="userForm" label-width="80px">
    <el-form-item label="姓">
      <el-input v-model="userForm.lastName"></el-input>
    </el-form-item>
    <el-form-item label="名">
      <el-input v-model="userForm.firstName"></el-input>
    </el-form-item>
    <el-form-item label="省">
      <el-input v-model="userForm.province"></el-input>
    </el-form-item>
    <el-form-item label="市">
      <el-input v-model="userForm.city"></el-input>
    </el-form-item>
    <el-form-item label="区">
      <el-input v-model="userForm.district"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">提交</el-button>
    </el-form-item>
  </el-form>

  <div v-if="fullName || fullAddress">
    <h3>拼接结果：</h3>
    <p v-if="fullName">姓名：{{ fullName }}</p>
    <p v-if="fullAddress">地址：{{ fullAddress }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userForm: {
        lastName: '',
        firstName: '',
        province: '',
        city: '',
        district: ''
      },
      fullName: '',
      fullAddress: ''
    };
  },
  methods: {
    submitForm() {
      this.fullName = this.getFullName();
      this.fullAddress = this.getFullAddress();
    },
    getFullName() {
      return `${this.userForm.lastName} ${this.userForm.firstName}`;
    },
    getFullAddress() {
      return `${this.userForm.province} ${this.userForm.city} ${this.userForm.district}`;
    }
  }
};
</script>

<style scoped>
.el-form {
  max-width: 500px;
  margin: 0 auto;
}
</style>

在这个组件中，我们使用了 Element UI 的 el-form 和 el-input 组件来创建表单。表单的每个字段都通过 v-model 绑定到 userForm 对象的相应属性上。

当用户点击“提交”按钮时，submitForm 方法会被调用。这个方法会调用 getFullName 和 getFullAddress 方法来拼接姓名和地址，并将结果赋值给 fullName 和 fullAddress，然后在页面上显示出来。

4. 使用计算属性优化

在上面的代码中，我们通过方法 getFullName 和 getFullAddress 来拼接字段值。这种方法在每次调用时都会重新计算，如果字段值没有变化，这会导致不必要的计算。

为了优化性能，我们可以使用 Vue 的计算属性（computed properties）。计算属性会根据依赖的响应式数据自动缓存结果，只有在依赖的数据发生变化时才会重新计算。

我们可以将 getFullName 和 getFullAddress 改为计算属性：

<template>
  <el-form :model="userForm" label-width="80px">
    <el-form-item label="姓">
      <el-input v-model="userForm.lastName"></el-input>
    </el-form-item>
    <el-form-item label="名">
      <el-input v-model="userForm.firstName"></el-input>
    </el-form-item>
    <el-form-item label="省">
      <el-input v-model="userForm.province"></el-input>
    </el-form-item>
    <el-form-item label="市">
      <el-input v-model="userForm.city"></el-input>
    </el-form-item>
    <el-form-item label="区">
      <el-input v-model="userForm.district"></el-input>
    </el-form-item>
  </el-form>

  <div v-if="fullName || fullAddress">
    <h3>拼接结果：</h3>
    <p v-if="fullName">姓名：{{ fullName }}</p>
    <p v-if="fullAddress">地址：{{ fullAddress }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userForm: {
        lastName: '',
        firstName: '',
        province: '',
        city: '',
        district: ''
      }
    };
  },
  computed: {
    fullName() {
      return `${this.userForm.lastName} ${this.userForm.firstName}`;
    },
    fullAddress() {
      return `${this.userForm.province} ${this.userForm.city} ${this.userForm.district}`;
    }
  }
};
</script>

<style scoped>
.el-form {
  max-width: 500px;
  margin: 0 auto;
}
</style>

在这个版本中，我们不再需要 submitForm 方法，因为 fullName 和 fullAddress 是计算属性，它们会自动根据 userForm 中的字段值进行更新。

5. 处理空值情况

在实际应用中，用户可能不会填写所有字段。如果某个字段为空，拼接结果中可能会出现多余的空格。例如，如果用户没有填写“区”，那么地址可能会显示为“广东省深圳市 ”。

为了避免这种情况，我们可以在拼接之前检查字段是否为空，并在必要时跳过该字段。

computed: {
  fullName() {
    return [this.userForm.lastName, this.userForm.firstName].filter(Boolean).join(' ');
  },
  fullAddress() {
    return [this.userForm.province, this.userForm.city, this.userForm.district].filter(Boolean).join(' ');
  }
}

在这个版本中，我们使用了 filter(Boolean) 来过滤掉空值，然后使用 join(' ') 将非空字段拼接在一起。

6. 总结

通过本文的介绍，我们学习了如何在 Vue.js 和 Element UI 中实现多个字段值的拼接功能。我们首先创建了一个表单组件，然后通过方法和计算属性实现了字段值的拼接。最后，我们还优化了代码，处理了空值情况，确保拼接结果的准确性。

Vue.js 和 Element UI 提供了强大的工具和组件，使得前端开发变得更加高效和便捷。希望本文的内容能够帮助你在实际项目中更好地应用这些技术。