Element UI 【实战】纯前端对表格数据进行增删改查（内含弹窗表单、数据校验、时间日期格式）

<template>
    <div style="padding: 20px">
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                v-if="dialogVisible"
                width="60%"
        >
            <el-form ref="refForm" :disabled="action === 'scan'" :model="formData"
                     :label-width="(config.labelWidth || '100')+'px'"
                     :size="config.size||'mini'">
                <el-row :gutter="config.gutter">
                    <el-col :key="index" :span="item.span?item.span:12"
                            v-for="(item,index) in config.itemList.filter(item=>!item.hideInForm)">
                        <el-form-item
                                style="height: 36px"
                                :label="item.label+ (config.labelPostfix || '：')"
                                :prop="item.prop"
                                :rules="[
                                            {required: item.require, message: '请输入'+item.label},
                                            {pattern:item.pattern, message: item.formatMsg || '格式不符合规范' }
                                        ]"
                        >
                            <!--单行文本 input-->
                            <el-input
                                    v-if="item.type=='input'|| item.type===undefined"
                                    show-word-limit
                                    :disabled="item.disabled"
                                    :maxlength="item.maxlength"
                                    :placeholder="item.placeholder"
                                    :prefix-icon="item.preIcon"
                                    :style="'width:'+item.width||'100%'"
                                    clearable
                                    type="text"
                                    v-model="formData[item.prop]">
                            </el-input>
                            <!--单选 radio-->
                            <el-radio-group v-if="item.type=='radio'" v-model="formData[item.prop]">
                                <el-radio :key="index" :label="items.value" v-for="(items,index) in item.list||[]">
                                    {{items.label}}
                                </el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span v-if="action !== 'scan'" slot="footer">
                    <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                    <el-button size="small" type="primary" @click="confirm">确 定</el-button>
            </span>
        </el-dialog>
        <el-row style="margin: 16px 0px">
            <el-button size="mini" type="primary" @click="add">新增</el-button>
        </el-row>
        <el-table ref="refTable" :data="tableData" border>
            <el-table-column
                    v-for="(item,index) in config.itemList.filter(item=>!item.hideInTable)"
                    :align="item.align?item.align:'center'"
                    :label=item.label
                    :prop=item.prop
                    :min-width="item.minWidth?item.minWidth:'120'"
                    :formatter="item.formatter"
                    :key="index"
                    show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <span v-if="item.list && item.list.length>0">{{getLabel(item.list,scope.row[item.prop])}}</span>
                    <span v-else>{{scope.row[item.prop]}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    align="center"
                    width="160">
                <template slot-scope="scope">
                    <el-button @click="scan(scope.row)" type="text" size="small">查看</el-button>
                    <el-button @click="edit(scope.$index)" type="text" size="small">编辑</el-button>
                    <el-button @click="del(scope.$index,scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                index: null,
                action: '',
                dialogTitle: '',
                dialogVisible: false,
                config: {
                    itemList: [
                        {
                            label: '姓名',
                            prop: 'name',
                            type: 'input',
                            require: true
                        },
                        {
                            label: '性别',
                            prop: 'gender',
                            type: 'radio',
                            defaultValue: '1',
                            list: [
                                {
                                    label: '男',
                                    value: '1'
                                },
                                {
                                    label: '女',
                                    value: '2'
                                },
                            ]
                        },
                        {
                            label: '手机号码',
                            prop: 'phone',
                            type: 'input',
                            maxlength: 11,
                            pattern: this.GLOBAL.phoneRegExp,
                            hideInTable: true
                        },
                        {
                            label: '创建日期',
                            prop: 'date',
                            hideInForm: true
                        },
                    ]
                },
                formData: {},
                tableData: [],
            }
        },
        methods: {
            // 表单校验
            ifvalid() {
                let result = true
                this.$refs.refForm.validate(valid => {
                    if (!valid) {
                        result = false
                    }
                })
                return result
            },
            // 保存/修改确认
            confirm() {
                if (this.ifvalid()) {
                    if (this.action === 'add') {
                        this.$set(this.formData,'date',new Date().format("yyyy-MM-dd hh:mm:ss"))
                        this.tableData.push(this.formData)
                    }
                    if (this.action === 'edit') {
                        this.$set(this.tableData, this.index, this.formData)
                    }
                    this.dialogVisible = false
                }
            },
            add() {
                this.action = 'add'
                this.dialogTitle = '新增'
                this.formData = {}
                this.config.itemList.forEach(
                    item => {
                        if (item.defaultValue !== undefined) {
                            this.$set(this.formData, item.prop, item.defaultValue)
                        }
                    }
                )
                this.dialogVisible = true
            },
            edit(index) {
                this.index = index
                this.action = 'edit'
                this.dialogTitle = '修改'
                this.formData = JSON.parse(JSON.stringify(this.tableData[index]))
                this.dialogVisible = true
            },
            del(index, id) {
                this.$confirm('确定删除吗?', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData.splice(index, 1);
                })
            },
            scan(row) {
                this.formData = row
                this.action = 'scan'
                this.dialogTitle = '详情'
                this.dialogVisible = true
            },
            // 表格中，显示表单中下拉数据的中文
            getLabel(list, value) {
                for (let item of list) {
                    if (item.value === value) {
                        return item.label
                        break
                    }
                }
            },
        }
    }
 
 
    // 为Date原型添加时间格式化方法
    Date.prototype.format = function(fmt) {
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            S: this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(
                RegExp.$1,
                (this.getFullYear() + "").substr(4 - RegExp.$1.length)
            );
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt)) {
                fmt = fmt.replace(
                    RegExp.$1,
                    RegExp.$1.length == 1
                        ? o[k]
                        : ("00" + o[k]).substr(("" + o[k]).length)
                );
            }
        }
        return fmt;
    };
</script>
<style scoped>
</style>