vue 常见数据增删改查，_iview点击添加新增一条可配置数据-优快云博客

本文链接：https://blog.youkuaiyun.com/Xiaoxiao_Zheng/article/details/105146929

本文介绍了在Vue+Iview环境下如何实现数据的增删改查功能。通过父子组件间传参，利用props和$refs进行通信。在传参过程中，若直接修改数组可能导致原数据被改变，解决方案是使用副本进行操作。同时讨论了props与$refs的区别，props用于从父组件向子组件传递数据，而$refs则用于获取子组件实例或其方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：数据的增删改查

场景： vue + iview

点击增加，抽屉填写内容，保存数据，修改数据

实现：

1 list 列表

父组件

<template>
    <div class="dic-list">
        <button @click="onAddDic>增加</button>
        <Table :columns="dicColumn" :data="dicData"></Table>
        <SccPage :total="listTotal" class="page" :current='dicForm.pageNum' @on-change="onChange"
                 @on-page-size-change="onPageSizeChange"></SccPage>
        <!--  新建，編輯 -->
        <DicAdd ref="dicForm"  v-model="isShowDrawer" @on-success="onSuccess"></DicAdd>
    </div>
</template>

2 增加，修改页面

子组件

<template>
    <BuilderDrawer v-model="isShowDrawer" :styles="styles"  class="create-drawer">
    <!-- 按钮 -->
        <div slot="header"  class="header-warp">
            <Button  type="primary"  class="btns"  @click="onSave"> 保存</Button>
            <Button @click="onCancel" class="btns"> 关闭</Button>
        </div>
        <!-- 内容 -->
        <Form ref="dicForm"  label-position="left" :model="dicForm"  :rules="dicRules" :label-width="80" class="dic-add"   >
            <!-- 字典名称 -->
            <Row type="flex" justify="space-around" class="row">
                <Col span="24">
                    <FormItem label="字典名称" prop="dictName">
                        <Input v-model="dicForm.dictName" class="row-input m-right"></Input>
                    </FormItem>
                </Col>
            </Row>
            <!-- 编码 选项 -->
            <Row type="flex" justify="space-between" class="row">
                <Col class="col-input">
                    <FormItem label="编号" class="item" prop="dictItemKey"  v-for="(item,index) in dicForm.dictItemPos"  :key="index" :prop="'dictItemPos.' + index + '.dictItemKey'" :rules="dicRules.dictItemKey">
                        <Input v-model="item.dictItemKey"  class="item" number></Input>
                    </FormItem>
                </Col>
                <Col class="col-input">
                    <FormItem label="选项" prop="dictItemName"   v-for="(item,index) in dicForm.dictItemPos"  :key="index" :prop="'dictItemPos.' + index + '.dictItemName'" :rules="dicRules.dictItemName">
                        <Input v-model="item.dictItemName"  class="item"></Input>
                        <Icon class="icon-size" type="md-add"  @click="addDic()"/>
                        <Icon class="icon-size" type="md-remove" v-show="dicForm.dictItemPos.length> 1" @click="delDic(index)"/>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </BuilderDrawer>
</template>

3 父子组件之间传参

（1）通过props

//子组件中要
props: {
        value: Boolean,
        editForm: {//编辑传参
            type: Object,
            default: () => {
                return {}
            }
        },
    },
//监听
editForm(n, o) {
          if (n.dictId) {
                  this.dicForm = n,
                //   保存老的电话号码
                  this.OldDicForm = n;
              }
          }
///父组件中给
<DicAdd ref="dicForm"  v-model="isShowDrawer" @on-success="onSuccess" :editForm="editForm"></DicAdd>

（2）通过ref

this.$refs['dicForm'].dicForm = param

4 传参注意事项，

eg： dictItemPos参数是个数组，

let param = {
                    dictName: params.dictName,
                    dictId: params.dictId,
                    pageId: params.pageId,
                    dictItemPos: params.dictItemPos,
                }

如果按照步骤3传值，然后修改，editForm中的数据也会直接修改

5 解决方式

editForm(n, o) {
              if (n.dictId) {
                //   ...浅拷贝。添加选项，会直接加到editForm中
                  this.dicForm = deepCopy(n),
                //   保存老的电话号码
                  this.OldDicForm = deepCopy(n);
              }
          }




//or
this.$refs['dicForm'].dicForm = deepCopy(param)
this.$refs['dicForm'].OldDicForm = deepCopy(param)

6 对参数进行增删改

步骤5中的OldDicForm 参数是保存老数据进行对比的，

修改数据：通过id判断是新增还是删除的老数据

// 修改需要对比老数据，删除的数据isDelete为true
                let newDicItem = [];
            // 当前字典选项id数组
            this.dicForm.dictItemPos.map(item => {
                newDicItem.push(item.dictId)
            })
            for (let i = 0; i< this.OldDicForm.dictItemPos.length; i++) {
                let item = this.OldDicForm.dictItemPos[i];
                if (!newDicItem.includes(item.dictId)) {
                    item.isDeleted = true;
                    this.dicForm.dictItemPos.push(item)
                }
            }

问题：

props 和$refs的区别