正文

在vue中场景，循环行，点击当前行编辑数据

IP云
IP云V管理员/7 阅读
12/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

当前列表

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

<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';

相关阅读

目录[+]