ElementUI之使用Dialog框实现表格当行修改

修改按钮

<el-table-column
       label="操作"
       fixed="right"
       :render-header="tableAction"
       width="120"
       align="center">
   <template slot-scope="scope">
       <!--单个修改按钮-->
       <el-button @click="editModifyNotice(scope.row)" type="primary" icon="el-icon-edit" size="small"
                  circle></el-button>
       <!--单个删除按钮-->           
       <el-button @click="deleteNotice(scope.row.noticeId)" v-if="userRole==1" type="danger"
                  icon="el-icon-delete" size="small"
                  circle></el-button>
   </template>
</el-table-column>

data中需定义的数据

//修改公告
modifyNoticeVisible: false,
modifyNoticeTitle: "修改公告",
currentNotice: {
    noticeId: '',
    title: '',
    content: '',
    noticeTime: '',
    operName: ''
},

修改使用的方法

 // 打开更新Dialog
editModifyNotice(currentNotice) {
    this.currentNotice = currentNotice;
    this.modifyNoticeVisible = true;
},
//取消更新
cancelModify() {
    this.queryNoticeList();
    this.modifyNoticeVisible = false;
},
 //更新车辆信息
modifyNotice(data) {
    let APP = this;
    APP.$Api.modifyNotice(data, function (result) {
        if (result.result == "true") {
            APP.$notify.success({
                title: '温馨提示：',
                message: '公告' + result.message,
            });
            APP.modifyNoticeVisible = false;
            APP.queryNoticeList();
        } else {
            APP.$notify.error({
                title: '温馨提示：',
                message: '公告' + result.message
            });
            APP.modifyNoticeTitle = true;
        }
    });
}

导入修改公告组件

 import ModifyNotice from "~/views/Notice/ModifyNotice.vue";

在components中添加

components: {
             ModifyNotice
 },

修改公告组件ModifyNotice.vue内容

<template>
    <div>
        <el-dialog :title="title" :visible.sync="modifyNoticeVisible" v-if="modifyNoticeVisible" width="35%"
                   :before-close="handleCancel" :close-on-click-modal="false" @open="openModify">
            <el-form label-position="right" label-width="100px" :rules="rules" ref="notice"
                     style="padding: 0px 70px 0px 10px;" :model="ruleForm" class="demo-ruleForm">
                <el-form-item label="公告标题" prop="title">
                    <el-input v-model="ruleForm.title" maxlength="10"
                              show-word-limit clearable></el-input>
                </el-form-item>
                <el-form-item label="公告内容" prop="content">
                    <el-input type="textarea" rows="5" maxlength="60"
                              show-word-limit  v-model="ruleForm.content" clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="onSubmit()">确认修改</el-button>
                <el-button @click="handleCancel">取&nbsp;&nbsp;&nbsp;&nbsp;消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import moment from 'moment';

    export default {
        name: "ModifyNotice",
        props: {
            modifyNoticeVisible: Boolean,
            data: [Object, Boolean],
            title: String,
            ruleForm: Object
        },
        data() {
            return {
                rules: {
                    title: [
                        {required: true, message: '请输入公告标题', trigger: 'blur'}
                    ],
                    content: [
                        {required: true, message: '请输入公告内容', trigger: 'blur'}
                    ]
                }
            };
        },
        methods: {
            openModify() {
                this.$nextTick(function () {
                    this.$refs['notice'].resetFields();
                    for (var key in this.entity) {
                        if (this.entity.hasOwnProperty(key)) {
                            this.entity[key] = '';
                        }
                    }
                });
            },
            onSubmit() {
                let formData = this.ruleForm;
                this.$refs['notice'].validate((valid) => {
                    if (valid) {
                        this.$emit('val-change', formData);
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            },
            //关闭弹窗
            handleCancel() {
                this.$emit('cancel');
            }
        }
    }
</script>

<style lang="less" scoped>

</style>

来源：CSDN

作者：对，是我

链接：https://blog.csdn.net/qq_41154522/article/details/104628369