问题:多条for循环出的数据二级联动
for循环出多条数据,每条数据都有一个二级联动,每次下拉一级联动,二级的选项都是变化的。

思考
刚开始一直想不出如何实现二级联动下拉的数据动态变化,因为之前一直都是v-for="item in data",认为data必须写死,后来尝试着让data是一个函数,结果成功了。

for循环的data可以是函数
这里顺便说一下v-for="item in data",data是数组参数和函数的区别:函数需要加(),否则无效

#附上完整代码:

<template>
<div>
<ul class="box">
<li v-for="(item1,index1) in args" style="min-height: 50px;">
<span style="float: left;">第{{index1+1}}条联动:</span>
<span class="b">
<i-select v-model="item1.type">
<i-option v-for="item3 in paramTypeName" :value="item3.type" :key="item3.id">{{ item3.name }}</i-option>
</i-select>
</span>
<span class="b">
<i-select v-model="item1.secondtype">
<i-option v-for="item4 in selectChange(item1.type)" :value="item4.type" :key="item4.id">{{ item4.name }}</i-option>
</i-select>
</span>
</li>
</ul>
</div>
</template>
<script>
export default {
components: {
//MultiSelect,
},
data() {
let vm = this; return {
paramTypeName: [{
"id": 1,
"type": "1", //一级联动类型
"name": "IP",
"subType": [{
"id": 1,
"type": "1", //二级联动类型
"name": "IP1"
},
{
"id": 2,
"type": "2",
"name": "IP2"
}
]
},
{
"id": 2,
"type": "2",
"name": "数字",
"subType": [{
"id": 1,
"type": "1",
"name": "数字1"
},
{
"id": 2,
"type": "2",
"name": "数字2"
},
{
"id": 3,
"type": "3",
"name": "数字3"
},
{
"id": 4,
"type": "4",
"name": "数字4"
}
]
},
{
"id": 3,
"type": "3",
"name": "银行卡",
"subType": [{
"id": 1,
"type": "1",
"name": "银行卡1"
},
{
"id": 2,
"type": "2",
"name": "银行卡2"
}
]
}
],
args: [{
"name": "name",
"type": "1", //一级联动值
"secondtype": "1", //二级联动值
},
{
"name": "pwd",
"type": "2",
"secondtype": "2",
}
],
typeSubs: {}
}
},
methods: {
selectChange(val) {
let vm = this;
let index = parseInt(val) - 1;
return vm.paramTypeName[index].subType;
},
}, //钩子函数,初始化页面使用
mounted() {},
}
</script>
<style scoped lang="less">
.box {
width: 600px;
.b {
width: 40%;
float: left;
margin-right: 10px;
}
li {
list-style: none;
}
}
</style>

vue+iview多条联动,for循环data是函数的更多相关文章

  1. Vue Snackbar 消息条队列显示,依次动画消失的实现

    效果预览 思路 封装 Snackbar 组件: 在根路由页面下建立全局 Snackbar 控制器,统一管理 Snackbar: 通过事件通知全局 Snackbar 控制器显示消息: 实现 1. 封装 ...

  2. 【vue】vue使用Element组件时v-for循环里的表单项验证方法

    转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...

  3. .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片

    .NET压缩图片保存   需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...

  4. 【巷子】---vue基于mint-ui三级联动---【vue】

    一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...

  5. Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现

    例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...

  6. vue+iview 通过a标签实现文件下载

    vue+iview 通过a标签实现文件下载 方法一: 注意: 如果下载的文件放在本地目录下,一定要将模板文件放到 public 目录下,否则由于权限问题找不到文件 路径: 项目更目录-->pub ...

  7. Vue+Iview+Node 登录demo

    1.相关组件安装 axios  iview  js-cookie  crypto-js 2.子父组件传值.监听窗体大小改变.记住密码 .自定义组件(事件 .props) created:实例已经创建完 ...

  8. vue 引用省市区三级联动(插件)

    vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...

  9. thinkphp5+vue+iview商城 公众号+小程序更新版本

    thinkphp5+vue+iview商城加分销 源码下载地址:http://github.crmeb.net/u/crmeb 演示站后台:http://demo25.crmeb.net 账号:dem ...

随机推荐

  1. Java实现 LeetCode 807 保持城市天际线 (暴力)

    807. 保持城市天际线 在二维数组grid中,grid[i][j]代表位于某处的建筑物的高度. 我们被允许增加任何数量(不同建筑物的数量可能不同)的建筑物的高度. 高度 0 也被认为是建筑物. 最后 ...

  2. Java实现 蓝桥杯VIP 算法训练 递归求二进制表示位数

    问题描述 给定一个十进制整数,返回其对应的二进制数的位数.例如,输入十进制数9,其对应的二进制数是1001,因此位数是4. 样例输入 一个满足题目要求的输入范例. 9 样例输出 与上面的样例输入对应的 ...

  3. Java实现算法竞赛入门经典例题-蚂蚁

    问题描述 一根长度为L厘米的木棍上有n只蚂蚁,每只蚂蚁要么朝左爬,要么朝右爬,速度为1厘米/秒. 当两只蚂蚁相撞时,二者同时掉头(掉头时间忽略不计). 给出每只蚂蚁的初始位置和朝向,计算T秒之后每只蚂 ...

  4. Java实现 LeetCode 224 基本计算器

    224. 基本计算器 实现一个基本的计算器来计算一个简单的字符串表达式的值. 字符串表达式可以包含左括号 ( ,右括号 ),加号 + ,减号 -,非负整数和空格 . 示例 1: 输入: "1 ...

  5. Java实现 LeetCode 16 最接近的三数之和

    16. 最接近的三数之和 给定一个包括 n 个整数的数组 nums 和 一个目标值 target.找出 nums 中的三个整数,使得它们的和与 target 最接近.返回这三个数的和.假定每组输入只存 ...

  6. java实现第六届蓝桥杯九数分三组

    九数分三组 题目描述 1~9的数字可以组成3个3位数,设为:A,B,C, 现在要求满足如下关系: B = 2 * A C = 3 * A 请你写出A的所有可能答案,数字间用空格分开,数字按升序排列. ...

  7. vue使用 video.js动态切换视频源视频源不刷新问题

    网上的垃圾代码太多,最后翻了video.js的官方文档,就这么简单,浪费了我这么久,注:我这里使用的vue //html <video  id="my-player" con ...

  8. 实用!看Python如何光速合并多个PDF

    大家好,今天分享一个实用的办公脚本:将多个PDF合并为一个PDF, 例如我手上现在有如下3个PDF分册,需要整合成一个完整的PDF. 如果换成你操作的话,是不是打开百度搜索:PDF合并,然后去第三方网 ...

  9. Python实现海贼王的歌词组成词云图

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者:一粒米饭 喜欢的朋友欢迎关注小编,除了分享技术文章之外还有很多福利, ...

  10. ubuntu下创建流媒体服务器的步骤

    注意,我用的是ubuntu16.04.10,用ubuntu18安装会报错 通过crtmpserver搭建的步骤: 服务器端前置操作: 安装openssh-server,这样可以在windows中通过s ...