当前位置: 首页 > article >正文

vue防止数据过滤,污染原数据

通过一级渠道下拉框接口获取数据,用户选择一级渠道时,动态过滤并显示与选中一级渠道parent相匹配的二级渠道数据。所有business以逗号连接存储。若用户先选二级渠道后改选一级,则filteredOptions存储新过滤的二级数据,确保二级下拉框与当前一级选择关联。提交时,二级选择独立,不依赖一级选择。案例

<template>
  <div>
    一级渠道<el-select v-model="selectedValue" placeholder="请选择" @change="handleValueChange">
      <el-option
        v-for="item in options"
        :key="item.business"
        :label="item.label"
        :value="item.business"
      />
    </el-select>
    二级渠道<el-select v-model="selectedValue2" placeholder="请选择" @change="handleValue2Change">
      <el-option
        v-for="item in filteredOptions2"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <el-button @click="resetOptions">重置选项</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [],
      options2: [],
      selectedValue: '',
      selectedValue2: '',
      filteredOptions2: []
    }
  },
  created() {
    this.initializeOptions()
  },
  methods: {
    initializeOptions() {
      // 初始化 options 和 options2
      this.options = [{
        business: 1,
        value: '选项1',
        label: '黄金糕1'
      }, {
        business: 2,
        value: '选项2',
        label: '双皮奶1'
      }, {
        business: 3,
        value: '选项3',
        label: '蚵仔煎1'
      }, {
        business: 4,
        value: '选项4',
        label: '龙须面1'
      }, {
        business: 5,
        value: '选项5',
        label: '北京烤鸭1'
      }]
      this.options2 = [{
        business: 1,
        value: '张三',
        label: '黄金糕'
      }, {
        business: 2,
        value: '李四',
        label: '双皮奶'
      }, {
        business: 3,
        value: '王五',
        label: '蚵仔煎'
      }, {
        business: 4,
        value: '赵六',
        label: '龙须面'
      }]
      this.filteredOptions2 = [...this.options2] // 初始时显示全部 options2
    },
    handleValueChange(value) {
      this.selectedValue2 = ''
      // 根据 value 过滤 options2
      this.filteredOptions2 = this.options2.filter(item => item.business === value)
    },
    handleValue2Change(value) {
      // 可以添加对 value2 变化的响应,但这里不改变 filteredOptions2
    },
    resetOptions() {
      // 重置 options2 为初始状态
      this.filteredOptions2 = [...this.options2]
    }
  }
}
</script>


http://www.kler.cn/news/322933.html

相关文章:

  • Unity 的 UI Event System 是一个重要的框架
  • (done) 声音信号处理基础知识(4) (Understanding Audio Signals for ML)
  • 机器学习查漏补缺(4)
  • 基于python+django+vue的旅游景点数据分析系统
  • iOS--RunLoop原理
  • Python 3 字典
  • 尚庭公寓-接口定义
  • 变种水仙花数 - Lily Number
  • 【Python】Flask-Admin:构建强大、灵活的后台管理界面
  • SpringBootWeb响应
  • java Nio的应用
  • Spring Boot入门指南
  • Angular与Vue的全方位对比分析
  • 实例讲解电动汽车故障限功限速控制策略及Simulink建模方法
  • 快速创建第一个Spring Boot 项目
  • K8s Calico替换为Cilium,以及安装Cilium过程(鲁莽版)
  • linux命令之git用法
  • 智能手机取证: 专家如何从被锁定设备中提取数据?
  • SSH连接提示秘钥无效
  • Vite使用vite-plugin-compression打包资源压缩
  • Steam黑神话悟空禁止更新进入游戏的解决方案
  • 【注册/登录安全分析报告:孔夫子旧书网】
  • 华为仓颉语言入门(6):if条件表达式
  • Python 爬虫 根据ID获得UP视频信息
  • 一个 Java 语言简化处理 PDF 的框架,提供了一套简单易用的 API 接口,满足多样化需求又能简化开发流程的处理方案(附教程)
  • Unity3D PostLateUpdate为何突然占用大量时间详解
  • Go进阶概览 -【7.3 Go语言中的安全与错误处理】
  • 服务器端请求伪造(SSRF)漏洞解析
  • 【PyTorch】Tensor(张量)介绍
  • 对比学习训练是如何进行的