0

我现在需要实现一个功能,点击右边的“添加”就生成一个左边的框框,这个功能如何用Vue来实现,各位大神能否指点下,提供下思路。对Vue不是太熟悉,也许是没有真正的懂得Vue的特点,所以没什么头绪

3个回答

1

左边的框框列表可以用 ul 来做,v-for 一个对象数组

list: [
    {
        label: '关系',
        value: '',
    },
    ...
]

那就明了了,点击'添加',弹出个输入框让他自己填写 label,然后给 list 数组增加一个对象就行.

0

整体思路:
数据改变视图
template

<template>
    <div>
        <div v-for="(item , i) in list" :key="i">
            <span v-for="(val,key) in item" :key="key">
                <lable>{{val.label}}</lable>
                <input v-model="val.prop"></input>
            </span>
        </div>
        <div @click="add">添加</div>
    </div>
</tempalte>

JS


const baseInfo =[
    {label:'关系',prop:null},
    {label:'姓名',prop:null},
    {label:'电话',prop:null}
];
exprot default{
//...
    data(){
        return {
            list:[baseInfo]
        }
    },
    methods:{
        add(){
            this.list.push(baseInfo);
        }
    }
}
0

如果关系可以自定义,那么
数据结构:

 const 关系键值对 = {
关系0:[{姓名:'姓名00',电话:'电话00'},{姓名:'姓名01',电话:'电话01'}],
关系1:[{姓名:'姓名10',电话:'电话10'},{姓名:'姓名11',电话:'电话11'}]
}


逻辑:根据当前选择的关系(如关系0),然后将 联系人的信息填入关系 为 本次选择关系的 联系人中。
思路的代码实现:比如选择关系为关系N,联系人姓名为 姓名03,联系人电话为 电话03;

     
     let userInfo = {姓名:'姓名03',电话:'电话03'};
     if(关系键值对['关系N']){
         关系键值对['关系N'].push(userInfo);
     }else{
         关系键值对['关系N'] = [];
         关系键值对['关系N'].push(userInfo);
     }
    

如果有看不懂得地方,你可以把你的model名字发给我,我直接给你写代码。

撰写答案