Vue表单

<template>
    <el-row type="flex" justify="center">
        <el-col :span="20">
            <div class="buttons">
                <el-button type="primary" icon="el-icon-plus" @click="showAddDialog()" plain>添加客户</el-button>
            </div>
            <el-card class="box-card">
                <el-table :data="client" style="width: 100%">
                    <el-table-column prop="id" label="id" width="180" />
                    <el-table-column prop="name" label="姓名" width="180" />
                    <el-table-column prop="address" label="地址" />
                    <el-table-column prop="phonenum" label="电话号码" />
                    <el-table-column prop="password" label="密码" />
                    <el-table-column label="操作">
                        <template #default="{ row }">
                            <el-button type="primary" icon="el-icon-edit" @click="showEditDialog(row)" plain>修改</el-button>
                            <el-button type="danger" icon="el-icon-delete" @click="deleteClient(row)" plain>删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
        </el-col>
    </el-row>
    <!-- 对话框部分不变，保持原样 -->
</template>

<style scoped>
.buttons {
    margin-bottom: 20px;
}
.box-card {
    box-shadow: 0px 0px 10px #ebebeb;
}
</style>