使用el-dialog弹框实现对列表的增删改查（无注释版本）

自律最差的编程狗

已于 2022-05-11 13:28:53 修改

阅读量525

点赞数 1

分类专栏： Vue element-ui 文章标签：前端 javascript vue.js

于 2022-05-11 13:18:16 首次发布

本文链接：https://blog.csdn.net/qq_40765784/article/details/124707777

版权

element-ui 同时被 2 个专栏收录

43 篇文章 20 订阅

订阅专栏

Vue

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="app">
        <el-button type='primary' @click='openTable'>open table</el-button>
        <el-dialog :visible.sync='tableVisible' :title='tableTitle' :center='true'>
            <el-dialog :visible.sync='formVisible' :title='formTitle' :center='true' :append-to-body='true'
                :before-close='formCancel'>
                <el-form :model='formData' :rules='formRules' ref='formData' label-width="100px">
                    <el-form-item label='name' prop='name'>
                        <el-input v-model='formData.name'></el-input>
                    </el-form-item>
                    <el-form-item label='address' prop='address'>
                        <!-- 因为id为number类型，所以必须声明校验类型为number -->
                        <el-select v-model='formData.address' placeholder='please choose address'>
                            <el-option v-for='(item,index)  in addresses' :key='index' :label='item.name'
                                :value='item.id'></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label='date' prop='date'>
                        <el-date-picker type='datetime' v-model='formData.date' placeholder='please choose date'>

                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <span slot='footer' class='dialog-footer'>
                    <el-button v-if='insertVisible' @click='insertCommit' type='success'>commit</el-button>
                    <el-button v-if='editVisible' @click='editCommit' type='success'>commit</el-button>
                    <el-button @click='formCancel'>cancel</el-button>
                </span>
            </el-dialog>
            <el-table :data='tableData'>
                <el-table-column label='index' type='index' :index='getIndex' width='60'></el-table-column>
                <el-table-column label='name' prop='name'></el-table-column>
                <el-table-column label='address' prop='address' :formatter='addressFormatter'></el-table-column>
                <el-table-column label='date' prop='date' :formatter='dateFormatter'></el-table-column>
                <el-table-column label='action'>
                    <template slot-scope='scope'>
                        <el-button type='warning' @click='editShow(scope.$index,scope.row)'>edit</el-button>
                        <template>
                            <el-popconfirm title='确定删除此行吗' confirm-button-text='yes' cancel-button-text='no'
                                confirm-button-type='primary' icon-color='red' @confirm='deleteRow(scope.$index)'
                                @cancel='deleteCancel'>
                                <el-button slot='reference' type='danger'>delete</el-button>
                            </el-popconfirm>
                        </template>
                    </template>
                </el-table-column>
            </el-table>
            <span slot='footer' class="dialog-footer">
                <el-button type='success' @click='insertOpen'>insert</el-button>
                <el-button @click='tableVisible = false'>cancel</el-button>
            </span>
        </el-dialog>
    </div>
</body>

</html>

<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                tableVisible: false,
                tableTitle: 'Table Title',
                tableData: [
                    { date: new Date(), name: 'bob', address: 0 }
                ],

                formVisible: false,
                formRules: {
                    name: [{ required: true, message: 'name must be required', triggle: 'blur' }],
                    address: [{ type: 'number', required: true, message: 'address must be choose', triggle: 'change' }],
                    date: [{ type: 'date', required: true, message: 'date must be choose', triggle: 'change' }]

                },
                formData: {
                    name: '',
                    address: '',
                    date: ''
                },
                formTitle: '',
                insertVisible: false,
                editVisible: false,
                editIndex: -1,

                addresses: [
                    { id: 0, name: 'anhui huibai' },
                    { id: 1, name: 'anhui hefei' },
                    { id: 2, name: 'anhui wuhu' },
                    { id: 3, name: 'anhui bozhou' },
                ]

            }
        },
        methods: {
            openTable() {
                this.tableVisible = true;

            },
            insertOpen() {
                this.formTitle = 'insert form'
                this.formVisible = true
                this.insertVisible = true
                this.$refs['formData'].clearValidate()
            },
            formCancel() {
                this.formVisible = false;
                this.editVisible = false;
                this.insertVisible = false;
                this.editIndex = -1
                this.formData = {}

            },
            getIndex(index) {
                return index + 1
            },
            dateFormatter(row) {
                let date = row.date
                return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getSeconds()}:${date.getMinutes()}`
            },
            editShow(index, row) {
                this.editIndex = index
                let formData = {
                    name: row.name,
                    date: row.date,
                    address: row.address
                }
                this.formData = formData
                this.formVisible = true
                this.editVisible = true
                this.formTitle = 'edit form'
                this.$refs['formData'].clearValidate()
            },
            addressFormatter(row) {
                let id = row.address;
                let name;
                this.addresses.forEach(element => {
                    if (element.id === id) {
                        name = element.name
                    }
                });
                return name
            },
            insertCommit() {
                this.$refs["formData"].validate((valid) => {
                    if (valid) {
                        this.tableData.push(this.formData)
                        this.formCancel()
                        this.$message.success(`insert success`)
                    }
                })
            },
            editCommit() {
                this.$refs['formData'].validate((valid) => {
                    if (valid) {
                        this.tableData.splice(this.editIndex, 1, this.formData)
                        this.formCancel()
                        this.$message.success('edit success')
                    }
                })
            },
            deleteRow(index) {
                this.tableData.splice(index, 1);
                this.$message.success('delete success');
            },
            deleteCancel() {
                this.$message.info('delete cancel');
            }
        }
    })

</script>
<style></style>