vue实现增、删、改

最新推荐文章于 2023-09-28 16:49:02 发布

原创最新推荐文章于 2023-09-28 16:49:02 发布 · 308 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

该文描述了如何在Vue项目中使用ElementUI库实现表格数据的增、删、改功能，不依赖后端接口。通过表格展示数据，自定义操作列进行编辑和删除，使用对话框处理新增和修改操作，同时包含表单验证和数据唯一性检查。

vue实现增、删、改

业务需求，前端实现增删改，不走接口
在这里插入图片描述

主页

    <el-table :data="collectionPointList"
                        :header-cell-style="{ fontSize: '14px', height: '48px', padding: '0px', background: 'white', }"
                        :row-style="{ height: 56 + 'px' }" height="40%" ref="multipleTable" :row-class-name="rowClassName">
                        <template slot="empty">
                            <h-empty v-if="isEmpty(collectionPointList)" type="table" />
                        </template>
                        <el-table-column label="编码" align="left" prop="code" :show-overflow-tooltip="true" />
                        <el-table-column label="名称" align="left" prop="name" :show-overflow-tooltip="true" />
                        <el-table-column label="采集点标识" align="left" prop="point" :show-overflow-tooltip="true" />
                        <el-table-column label="业务标识位" align="left" prop="businessPoint">
                            <template slot-scope="scope">
                                <span>{{ scope.row.businessPoint == true ? "是" : "否" }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" fixed="right" width="100px"
                            class-name="small-padding fixed-width">
                            <template slot-scope="scope">
                                <h-button type="text" icon="hv-edit" @click="handelUpdate(scope.row)">修改
                                </h-button>
                                <h-button type="text" class="delete_button" style="color: #f56c6c"
                                    @click="handleDelete(scope.$index)">删除
                                </h-button>
                            </template>
                        </el-table-column>
                    </el-table>

   <h-dialog :title="title" :visible.sync="open" append-to-body>
                    <el-form ref="form1" :model="form1" :rules="rules" label-width="110px">
                        <el-form-item label="编码:" prop="code">
                            <el-input v-model="form1.code" placeholder="请输入编码" />
                        </el-form-item>
                        <el-form-item label="名称:" prop="name">
                            <el-input v-model="form1.name" placeholder="请输入名称" />
                        </el-form-item>
                        <el-form-item label="采集点标识:" prop="point">
                            <el-input v-model="form1.point" placeholder="请输入采集点标识" />
                        </el-form-item>
                        <el-form-item label="业务标识位:" prop="businessPoint">
                            <el-switch v-model="form1.businessPoint" active-color="#13ce66">
                            </el-switch>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <h-button type="primary" @click="submitForm">确 定</h-button>
                        <h-button @click="cancel">取 消</h-button>
                    </div>
                </h-dialog>

JS部分

新增、修改

 handleAdd() {
            this.form1 = {
                businessPoint: true
            }
            this.title = "新增采集点"
            this.open = true
        },
        handelUpdate(row) {
            this.title = "修改采集点"
            this.open = true
            this.form1 = { ...row }
            this.id = row.id
        },
        //获取当前的行数
        rowClassName({ row, rowIndex }) {
            //把每一行的索引放进row
            row.id = rowIndex + 1;
        },


 submitForm() {
            this.$refs["form1"].validate((valid) => {
                if (valid) {
                    if (this.title === "新增采集点") {
                        let arrayCode
                        if (this.collectionPointList.length == 0) {
                            this.collectionPointList.push(this.form1)
                            this.open = false
                        } else {
                            //获取集合的编码
                            let listCodes = this.collectionPointList.map(item => item.code)
                            //判断表单中编码是否在集合中存在。此处判断，存在为true，不存在为false
                            arrayCode = listCodes.includes(this.form1.code)
                            //若不存在即添加
                            if (!arrayCode) {
                                this.collectionPointList.push(this.form1)
                                this.open = false
                            } else {
                                this.$modal.msgError("编码不可以重复")
                            }
                        }
                    } else {
                        let arrayCode
                        //获取集合的编码
                        let listCodes = this.collectionPointList.map(item => item.code)
                        //判断表单中编码是否在集合中存在。此处判断，存在为true，不存在为false
                        arrayCode = listCodes.includes(this.form1.code)
                        //若不存在即添加
                        if (!arrayCode) {
                            this.collectionPointList.forEach(element => {
                                if (element.id == this.id) {
                                    element.code = this.form1.code
                                    element.name = this.form1.name
                                    element.point = this.form1.point
                                    element.businessPoint = this.form1.businessPoint
                                }
                            })
                            this.open = false
                        } else {
                            this.$modal.msgError("编码不可以重复")
                        }

                    }
                }
            })

        },

删除

//采集点删除
        handleDelete(index) {
            this.$modal.confirm('是否确认删除选中的数据项？').then(function () {
            }).then(() => {
                this.collectionPointList.splice(index, 1);
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },