• 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 {
     600px;
    .b {
     40%;
    float: left;
    margin-right: 10px;
    }
    li {
    list-style: none;
    }
    }
    </style>
  • 相关阅读:
    09_注解01
    hasattr() getattr() setattr() 函数使用方法
    xpath
    you-get
    Out of range value for column 'phon' at row 1
    五, Authentication和Permissions
    四,ViewSets和Routers
    二,Request和Response
    一,Serializer和ModelSerializer
    三,APIView、GenericAPIView、Mixins总结
  • 原文地址:https://www.cnblogs.com/zoushuangyu/p/13198377.html
Copyright © 2020-2023  润新知