手写一个二级选择框联动

（图一）

（图二）

如上图所示，当选择类型时，阶段选择内部需要显示该类型里面的阶段。

大概可以这样子理解：

{类型1：{阶段M： XXX}，类型2：{阶段N： XXX，阶段E： XXX}
}

代码分析：

<el-form-item label="类型:"><el-selectv-model="form.type"clearableplaceholder="请选择类型"@change = "getStep"><el-optionv-for="item in stage"   //遍历stage里面的值:key="item.name":value="item.name"/></el-select>
</el-form-item><el-form-item label="阶段:"><el-selectv-model="form.step"clearableplaceholder="请选择活动区域"@change = "getStage"><el-optionv-for="item in stageStep"   //根据stage对应的每一项，对应的阶段内容stageStep进行遍历:key="item.type":value="item.name"/></el-select>
</el-form-item>

JS 代码：

  data() {return {form: {step: 0,stage: 0}，stage: {},stageStep: {}};},mounted() {// 调用接口获取总数据 并给 this.stage 赋值}，methods: {getStep(value) {         //获取类型数据if (!(JSON.stringify(this.stage) === "{}")) {Object.keys(this.stage).forEach(key => {if (this.stage[key].name === value) {this.stageStep = this.stage[key].stage;}});}},getStage(value) {     //获取选择类型后对应的数据if (!(JSON.stringify(this.stage) === "{}")) {this.stageStep.forEach(val => {if (val.name === value) {this.form.stage = val.type;}});}}
}

调用接口返回值参考：

{"code": 0,"data": {"return_call": {"type": 1,"name": "班主任满意度 ","stage": [{"type": 1,"name": "Welcome Call","url": "https://jinshuju.net/f/PJYBgQ"},{"type": 2,"name": "首课提醒","url": "https://jinshuju.net/f/PJYBgQ"},{"type": 3,"name": "首课回访","url": "https://jinshuju.net/f/PJYBgQ"},{"type": 4,"name": "月常规回访","url": "https://jinshuju.net/f/PJYBgQ"}]}}
}

手写一个二级选择框联动相关推荐

html手写vue多级选择框,vue多级多选菜单组件开发
本文实例为大家分享了vue多级多选菜单组件的制作方法,供大家参考,具体内容如下要开发一个这样的多级多选菜单组件,功能是: 点击父标题栏可以打开与折叠子列表点击父标题栏的勾选图标可以全选或取消子列表 ...
html手写vue多级选择框,vue + html 编写仿element select 多选组件
现在做vue项目主要用的ui框架差不多都是elementui,但是每个项目设计的不同难免和element组件产生差异甚至是大不相同,有的时候差异少比如页面样式不太相同,功能使用完全一样的话,这样改改样 ...
vue 使用fs_模仿vue-cli，手写一个脚手架
vue-cli 在vue的开发的过程中,经常会使用到vue-cli脚手架工具去生成一个项目.在终端运行命令vue create hello-world后,就会有许多自动的脚本运行. 为什么会这样运行呢 ...
vue @click 赋值_vue 手写一个时间选择器
vue 手写一个时间选择器最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件,今天带大家一步一步实现 DatePicker 的 vue 组件. 原理 Da ...
ds查找—二叉树平衡因子_面试官让我手写一个平衡二叉树，我当时就笑了
平衡二叉树对于初学者一直是一个比较复杂的知识点,因为其里面涉及到了大量的旋转操作.把大量的同学都给转晕了.这篇文章最主要的特点就是通过动画的形式演示.确保大家都能看懂.最后是手写一个平衡二叉树. 一. ...
俄罗斯小方块游戏html,通过h5的canvas手写一个俄罗斯方块小游戏
开始自己手写一个好玩的俄罗斯方块吧,上变形,左右移动,下加速,空格瞬移等功能,无聊的时候学习下canvas,f12 修改分数,体验金手指的快乐吧 1.定义界面,和按钮上下左右 2.js部分 1 ...
深度学习笔记：手写一个单隐层的神经网络
出处:数据科学家养成记深度学习笔记2:手写一个单隐层的神经网络笔记1中我们利用 numpy 搭建了神经网络最简单的结构单元:感知机.笔记2将继续学习如何手动搭建神经网络.我们将学习如何利用 num ...
antd 下拉框怎么联动_Antd的Table组件嵌套Table以及选择框联动操作
一.需求在使用Table组件嵌套Table时,父子Table的选择框需要联动,即父Table选中,该行下的子Table需要全选中,某一个子Table全部选中,则该子Table所在的父Table那一行 ...
python手写一个迭代器_搞清楚 Python 的迭代器、可迭代对象、生成器
很多伙伴对 Python 的迭代器.可迭代对象.生成器这几个概念有点搞不清楚,我来说说我的理解,希望对需要的朋友有所帮助. 1 迭代器协议迭代器协议是核心,搞懂了这个,上面的几个概念也就很好理解了. ...

手写一个二级选择框联动

手写一个二级选择框联动相关推荐

最新文章

热门文章