vue实践-删除按钮的实现

element.js

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-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                @click="btnDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>

method方法

methods: {
            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
                    });
                })
            }
        }