vue+iview多条联动,for循环data是函数
问题:多条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是函数的更多相关文章
- Vue Snackbar 消息条队列显示,依次动画消失的实现
效果预览 思路 封装 Snackbar 组件: 在根路由页面下建立全局 Snackbar 控制器,统一管理 Snackbar: 通过事件通知全局 Snackbar 控制器显示消息: 实现 1. 封装 ...
- 【vue】vue使用Element组件时v-for循环里的表单项验证方法
转载至:https://www.jb51.net/article/142750.htm标题描述看起来有些复杂,有vue,Element,又有表单验证,还有v-for循环?是不是有点乱?不过我相信开发中 ...
- .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片
.NET压缩图片保存 需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...
- 【巷子】---vue基于mint-ui三级联动---【vue】
一.基本配置 https://github.com/modood/Administrative-divisions-of-China 三级联动数据地址 二.vue基本配置 1.cnpm install ...
- Vue + iview框架,搭建项目遇到的相关问题记录 - 国际化router.js不能实现
例子展示: 概述: 最近在使用vue + iview框架进行web开发,并且有一个需求,需要实现web端的国际化,在完成相关配置文件后,发现router.js 中无法配置,并且会出现异常,在经过百度找 ...
- vue+iview 通过a标签实现文件下载
vue+iview 通过a标签实现文件下载 方法一: 注意: 如果下载的文件放在本地目录下,一定要将模板文件放到 public 目录下,否则由于权限问题找不到文件 路径: 项目更目录-->pub ...
- Vue+Iview+Node 登录demo
1.相关组件安装 axios iview js-cookie crypto-js 2.子父组件传值.监听窗体大小改变.记住密码 .自定义组件(事件 .props) created:实例已经创建完 ...
- vue 引用省市区三级联动(插件)
vue 用省市区三级联动之傻瓜式教程(复制粘贴即用) npm 下载 npm install v-distpicker --save main.js //引入 省市区三级联动 import Distpi ...
- thinkphp5+vue+iview商城 公众号+小程序更新版本
thinkphp5+vue+iview商城加分销 源码下载地址:http://github.crmeb.net/u/crmeb 演示站后台:http://demo25.crmeb.net 账号:dem ...
随机推荐
- Java分层经验
在学习和使用Java的过程中,我们时常要用到各种工具与技术,它们在某些时候可以大幅度地简化编程,利用好它们,可以让代码更强壮.下面的表格是我总结的关于java开发可能会用到的工具与它们在项目中扮演的角 ...
- jchdl - GSL Port
https://mp.weixin.qq.com/s/DVmMrCFgNLuZDtssQ85w7A org.jchdl.model.gsl.core.meta.Port.java gen ...
- Spring-boot01
本文记录Spring-Boot学习途中的点点滴滴. 其实Spring-Boot出来好长时间了,但是一直没去关注过.之前在我的印象里Spring-Boot好就好在减去了很多XML配置,加入了很多自动配置 ...
- Java实现 LeetCode 710 黑名单中的随机数(黑白名单)
710. 黑名单中的随机数 给定一个包含 [0,n ) 中独特的整数的黑名单 B,写一个函数从 [ 0,n ) 中返回一个不在 B 中的随机整数. 对它进行优化使其尽量少调用系统方法 Math.ran ...
- Java实现 LeetCode 707 设计链表(环形链表)
707. 设计链表 设计链表的实现.您可以选择使用单链表或双链表.单链表中的节点应该具有两个属性:val 和 next.val 是当前节点的值,next 是指向下一个节点的指针/引用.如果要使用双向链 ...
- Java实现 LeetCode 692 前K个高频单词(map的应用)
692. 前K个高频单词 给一非空的单词列表,返回前 k 个出现次数最多的单词. 返回的答案应该按单词出现频率由高到低排序.如果不同的单词有相同出现频率,按字母顺序排序. 示例 1: 输入: [&qu ...
- Java实现 LeetCode 478 在圆内随机生成点
478. 在圆内随机生成点 给定圆的半径和圆心的 x.y 坐标,写一个在圆中产生均匀随机点的函数 randPoint . 说明: 输入值和输出值都将是浮点数. 圆的半径和圆心的 x.y 坐标将作为参数 ...
- java实现第五届蓝桥杯幂一矩阵
幂一矩阵 天才少年的邻居 atm 最近学习了线性代数相关的理论,他对"矩阵"这个概念特别感兴趣.矩阵中有个概念叫做幂零矩阵.对于一个方阵 M ,如果存在一个正整数 k 满足 M^k ...
- Linux 系统命令sudo权限
sudo权限 root把本来只能超级用户执行的命令赋予普通用户执行 sudo的操作对象是系统命令 sudo使用 1.给普通用户赋予所能执行的权限(实质是修改/etc/sudoers文件):vi /et ...
- Linux 用户管理命令-userdel和su
userdel [选项] 用户名,可以删除用户,常用选项 -r :删除用户的同时删除用户的家目录,一般都要用,例如:userdel -r xbb 新建用户和删除用户的本质也就是修改了 /etc/sha ...