vue实践-添加，编辑，删除按钮的实现

element.js

import {Dialog} from "element-ui";
Vue.use(Dialog)

import { Message, MessageBox, Loading, Notification } from 'element-ui'
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;

button按钮

        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span style="position: relative; top: 7px;">商品列表</span>
                <el-button-group style="float: right; padding: 3px 0">
                    <el-button icon="el-icon-search" size="mini" type="primary" @click="dialogFormVisible = true">添加</el-button>
                </el-button-group>
            </div>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="地址">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="btnEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="btnDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

dialog显示

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form :model="productForm" label-width="80px">
                <el-form-item label="日期">
                    <el-input v-model="productForm.date">
                    </el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="productForm.name">
                    </el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model="productForm.address">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="btnSave">确 定</el-button>
            </div>
        </el-dialog>

method方法

        methods: {
            btnSave() {
            this.dialogFormVisible = false
            /*
                        unshift()：头部插入
                        push()：底部插入
                        splice(从哪里开始, 删除多少个, 添加)中间插入
                        */
            if (this.editRowIndex == -1) {
                //添加
                this.tableData.push(this.productForm)
            } else {
                //修改
                this.tableData.splice(this.editRowIndex, 1, this.productForm)
            }

            //清空表单内容
            this.productForm = { brand_right: 0 }
            },
            btnEdit(index, row) {
            console.log(index, row)
            this.editRowIndex = index
            this.dialogFormVisible = true
            //将内容显示在表单上
            this.productForm.date = row.date
            this.productForm.name = row.name
            this.productForm.address = row.address
            },
            btnDelete(index, row) {
                console.log(index, row);
                this.$confirm(`确认是否删除姓名为${row.name}的记录？`, '删除', {
                    confirmButtonText: '确定',
                }).then(() => {
                    let res = this.tableData.splice(index, 1)
                    let msg = `删除成功`
                    if (!res) {
                        msg = `删除失败`
                    }
                    this.$message({
                        type: 'info',
                        message: msg
                    });
                })
            },
            handleChange() {

            },
            btnAdd() {
            this.dialogFormVisible = true
            this.editRowIndex = -1
            },
            btnSearch() {

            },
            btnReset() {

            }
        }

style样式

<style scoped>
    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }
    .box-card {
        margin-top: 20px;
    }
</style>

效果图

最后

以上就是典雅面包为你收集整理的vue实践-添加，编辑，删除按钮的实现的全部内容，希望文章能够帮你解决vue实践-添加，编辑，删除按钮的实现所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。