ElementUI表格中获取当前行数据（实现对table数据的修改和删除）

先贴个代码，以后再描述吧！

点这里传送到CSDN，看详细描述。

<template>
    <div>
        <el-form :model="dengmiQueryForm" ref="dengmiQueryForm" label-width="100px" class="demo-ruleForm" size="mini">
            <el-row>
                <el-col span="8">
                    <el-form-item label="谜面">
                        <el-input v-model="dengmiQueryForm.mimian"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="谜目">
                        <el-input v-model="dengmiQueryForm.mimu"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="谜格">
                        <el-input v-model="dengmiQueryForm.mige"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col span="8">
                    <el-form-item label="谜底">
                        <el-input v-model="dengmiQueryForm.midi"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="作者">
                        <el-input v-model="dengmiQueryForm.zuozhe"></el-input>
                    </el-form-item>
                </el-col>
                <el-col span="8">
                    <el-form-item label="谜底字数">
                        <el-input v-model="dengmiQueryForm.midiLength"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="submitForm" icon="el-icon-search">查询</el-button>
                    <el-button type="warning" @click="resetForm" icon="el-icon-search" plain>重置</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-header></el-header>
        <div v-if="dengmiQueryForm.requestResult">
            <el-table :data="dengmiQueryForm.list.slice((dengmiQueryForm.currentPage-1)*dengmiQueryForm.pagesize,dengmiQueryForm.currentPage*dengmiQueryForm.pagesize)"
                      stripe border width="100%" height="350">
                <el-table-column type="index" fixed="left"></el-table-column>
                <el-table-column prop="mimian" label="谜面" width="300" fixed="left">
                </el-table-column>
                <el-table-column prop="dengmiSeq" label="序号">
                </el-table-column>
                <el-table-column prop="mimu" label="谜目">
                </el-table-column>
                <el-table-column prop="mige" label="谜格">
                </el-table-column>
                <el-table-column prop="midi" label="谜底">
                </el-table-column>
                <el-table-column prop="zuozhe" label="作者">
                </el-table-column>
                <el-table-column prop="mizhu" label="注">
                </el-table-column>
                <el-table-column prop="shangxi" label="赏析">
                </el-table-column>
                <el-table-column prop="leixing" label="类型">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="200px">
                    <el-row>
                        <el-col :span="10">
                            <el-tooltip effect="dark" content="编辑当前行" placement="top">
                                <el-button size="mini" @click="dengmiQueryForm.dialogVisible = true">编辑</el-button>
                            </el-tooltip>
                        </el-col>
                        <el-col :span="10">
                            <el-tooltip effect="light" content="删除当前行" placement="top">
                                <el-button size="mini" @click="dengmiQueryForm.dialogDeleteVisible = true" type="danger" plain>删除</el-button>
                            </el-tooltip>
                        </el-col>
                    </el-row>
                </el-table-column>
                <el-table-column label="操作尝试2">
                    <template slot-scope="scope">
                        <el-button type="text" @click="checkDetail(scope.row)">查看详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="margin-top: 5px;"></div>
            <el-pagination
                    prev-text="上一页"
                    next-text="下一页"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="dengmiQueryForm.currentPageA"
                    :page-sizes="[5,10,50,100]"
                    :page-size="5"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="dengmiQueryForm.list.length">
            </el-pagination>
        </div>
        <div v-else>
            请求失败！
        </div>
        <el-dialog title="编辑灯谜" :visible.sync="dengmiQueryForm.dialogVisible">
            <el-form :model="modifyForm">
                <el-form-item label="谜面" :label-width="modifyForm.formLabelWidth">
                    <el-input v-model="modifyForm.mimian" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="谜目" :label-width="modifyForm.formLabelWidth">
                    <el-input v-model="modifyForm.mimu" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dengmiQueryForm.dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dengmiQueryForm.dialogVisible = false">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="删除灯谜" :visible.sync="dengmiQueryForm.dialogDeleteVisible">
            <h1><span style="color: red"><strong>确定删除该行数据？删除后不可恢复！</strong></span></h1>
            <el-form>
                <el-form-item label="当前行数据">
                    <el-col :span="18">
                        <el-input v-model="dengmiQueryForm.deleteShow" readonly></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dengmiQueryForm.dialogDeleteVisible = false">取 消</el-button>
                <el-button type="primary" @click="dengmiQueryForm.dialogDeleteVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    export default {
        name: "dengmiQuery",
        data() {
            return {
                modifyForm:{
                    formLabelWidth:'120px',
                    mimian:'',
                    mimu:''
                },
                dengmiQueryForm: {
                    deleteShow:'',
                    dialogDeleteVisible:false,
                    dialogVisible: false,
                    currentRow: null,
                    visibleA: false,
                    currentPage: 1, //初始页
                    pagesize: 5,    //    每页的数据
                    currentPageA: 1,
                    mimian: '',
                    mimu: '',
                    mige: '',
                    midi: '',
                    zuozhe: '',
                    midiLength: '',
                    list: [],
                    requestResult: true,
                    thisRowData:{}
                }
            };
        },
        methods: {
            submitForm(formName) {
                console.log(formName.mimu);
                this.$http.get('http://localhost:909/dengmi/showDengmi2').then(function (success) {
                    console.log("This request is succeed! Here is the response:");
                    this.dengmiQueryForm.list = success.body.result;
                    this.dengmiQueryForm.requestResult = true;
                }, function (error) {
                    console.log("This request is failed! Here is the response:");
                    console.log(error);
                    this.dengmiQueryForm.requestResult = false;
                })
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleSizeChange(size) {
                this.dengmiQueryForm.pagesize = size;
                console.log(this.dengmiQueryForm.pagesize)  //每页下拉显示数据
            },
            handleCurrentChange(currentPage) {
                this.dengmiQueryForm.currentPage = currentPage;
                console.log(this.dengmiQueryForm.currentPage)  //点击第几页
            },
            handleEdit(row) {
                this.dengmiQueryForm.deleteShow = row.mimian + "(" + row.mimu + ")" + row.midi + "/" + row.zuozhe;
                // this.dengmiQueryForm.currentRow = row;
                console.log(this.dengmiQueryForm.deleteShow);
                this.modifyForm.mimian=row.mimian;
                this.modifyForm.mimu=row.mimu;

                // console.log("event=" + event);
                // console.log(colunm)
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            checkDetail(val){
                console.log(val)
            }

        }
    }
</script>
<style scoped>
</style>