标签：index vue map item 点击 场景 nbsp 添加 id

       当前列表

 

　　点击编辑，行变为编辑框。

　　

<Row style="color:#999;margin-bottom:11px">
                    <Row style="margin-bottom:10px" v-for='(item,index) in jiujie' :key=item.name>

                        <Row v-if='item.vis'>
                            <Col span="8">
                            {{item.name}}
                            </Col>
                            <Col span="2">
                            {{item.value}}
                            </Col>
                            <Col span="8" offset="6" style="vertical-align: middle">
                            <Button size='small' type="primary" @click='sdel(index)'>删除</Button>
                            &nbsp;
                            <Button size='small' @click="edits(item)">编辑</Button>
                            </Col>
                        </Row>

                        <Row v-if='!item.vis'>
                            </form>
                            <Col span="8">
                            <Input style="width:75%" v-model='jiujie[index].name' />
                            <div class='sdiv' :id="forId(index)">请输入变量名</div>
                            </Col>
                            <Col span="2">
                            <Select v-model="valueSelect">
                                <Option value="普通变量">普通变量
                                </Option>
                            </Select>
                            </Col>
                            <Col span="6">
                            <Input style="width:75%" v-model='jiujie[index].value' />
                            </Col>
                            <Col span="8" style="vertical-align: middle">
                            <Button size='small' type="primary" @click='save(item,index)'>保存</Button>
                            &nbsp;
                            <Button size='small' @click="changevis(item,index)">取消</Button>
                            </Col>
                        </Row>

                    </Row>

                    <Row style="margin-top:15px">
                        <Col span="4" offset="8" style="color:#2db7f5 ;font-size:14px;">
                        <div style="cursor: pointer;" @click='addenvir'>
                            <Icon type="ios-add" />添加环境变量</div>
                        </Col>
                    </Row>

                </Row>

通过在循环的数组中对象中添加新的元素控制显示隐藏，

通过es6 map方法

this.envirconfig.map((item, index) => {

                            this.jiujie.push(Object.assign({}, item, {
                                vis: true,
                            }))

                        });

验证的话是动态加入id，验证之后通过控制id添加样式

 forId: function (index) {
                return "a" + index;
            },

document.getElementById(id).style.display = 'block';

 

标签：index,vue,map,item,点击,场景,nbsp,添加,id
来源： https://www.cnblogs.com/xu-nian-qin/p/11082644.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。