点击el-radio的选项，下面input显示对应的相关信息

最新推荐文章于 2024-09-27 17:42:05 发布

原创最新推荐文章于 2024-09-27 17:42:05 发布 · 516 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

文章介绍了如何使用Vue.js中的计算属性(computed)和watch特性，根据用户选择的客户级别动态设置接待标准。给出了一段代码示例，展示了如何在表单组件中实现实时更新接待标准的功能。

当点击"客户级别"（CustomerLevel）的不同选项时，需要自动在"接待标准"（Standard）中显示相应的值。为实现这个需求，你可以使用计算属性（computed）或方法（method）来根据所选的"客户级别"动态设置"接待标准"的值。以下是一个使用计算属性的示例：

假设你有一个带有数据属性 form 和提供的模板的组件：

<template>
  <div>
    <el-col :span="12">
      <el-form-item label="客户级别" prop="CustomerLevel">
        <el-radio-group v-model="form.CustomerLevel">
          <el-radio :label="1">LV1</el-radio>
          <el-radio :label="2">LV2</el-radio>
          <el-radio :label="3">LV3</el-radio>
          <el-radio :label="4">无</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-col>

    <el-col :span="6" v-if="form.CustomerType == 1">
      <el-form-item label="接待标准" prop="Standard">
        <el-input type="text" v-model="form.standard" maxlength="100"></el-input>
      </el-form-item>
    </el-col>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        CustomerLevel: null, // CustomerLevel 的初始值
        CustomerType: 1, // 假设 CustomerType 的默认值为 1
        standard: "" // Standard 的初始值
      }
    };
  },
  computed: {
    computedStandard() {
      // 使用计算属性动态设置 'Standard' 的值
      switch (this.form.CustomerLevel) {
        case 1:
          return "LV1 标准";
        case 2:
          return "LV2 标准";
        case 3:
          return "LV3 标准";
        case 4:
          return "无标准";
        default:
          return "";
      }
    }
  },
  watch: {
    // 监听 CustomerLevel 的变化，并相应更新 standard
    "form.CustomerLevel": function(newVal) {
      this.form.standard = this.computedStandard;
    }
  }
};
</script>

在这个示例中，使用了 computedStandard 计算属性来根据所选的 “客户级别” (CustomerLevel) 确定 “接待标准” (Standard) 的值。watch 部分监视 CustomerLevel 的变化，并相应地更新 standard 属性。根据实际需求调整 computedStandard 中的逻辑，以根据所选的 “客户级别” 设置 “接待标准”