HTML文件中el-dialog,el-form,el-table的综合应用
实现了按钮打开显示Table列表弹窗，弹窗列表中实现对弹窗数据的新增，修改，删除，有bug请在评论区留言！！！
HTML文件中复制即用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>
head>
<body>
<div id="app">
<el-button type="text" @click="openDialog">打开表格页面el-button>
<el-dialog title="表格弹框页面" :visible.sync="dialogVisible" width="50%" :before-close="handleClose"
:center="true">
<el-dialog title="表单弹框页面" :append-to-body='true' :visible.sync="innerVisible" :center="true" >
<el-form :model="editForm" ref="editForm" label-width="80px" :rules="rules">
<el-form-item label="日期：" prop="date">
<el-date-picker
v-model="editForm.date"
type="datetime"
placeholder="选择日期">
el-date-picker>
el-form-item>
<el-form-item label="姓名：" prop="name">
<el-input v-model="editForm.name" >el-input>
el-form-item>
<el-form-item label="地址:" prop="address">
<el-select v-model="editForm.address">
<el-option v-for="(item,index) in addresses" :key="index" :label="item" :value="item">el-option>
el-select>
el-form-item>
el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="cancelAction">取消el-button>
<el-button type="danger" v-if="editVisible" @click="editAction">修改el-button>
<el-button type="danger" v-if="insertVisible" @click="insertAction">新增el-button>
span>
el-dialog>
<el-table :data="tableData">
<el-table-column property="date" label="日期" :formatter="formatDate">el-table-column>
<el-table-column property="name" label="姓名">el-table-column>
<el-table-column property="address" label="地址">el-table-column>
<el-table-column fixed="right" label="操作">
<template slot-scope="scope">
<el-button type="warning" size="small" @click="editData(scope.$index,scope.row)" plain>编辑el-button>
<el-popconfirm
icon="el-icon-info"
icon-color="red"
title="这是一段内容确定删除吗？"
@confirm="deleteAction(scope.$index)"
@cancel="cancel(scope.$index)"
>
<el-button type="danger" slot="reference" size="small" plain>删除el-button>
el-popconfirm>
template>
el-table-column>
el-table>
<span slot="footer" class="dialog-footer">
<el-button type="danger" @click="showAdd">新增el-button>
<el-button @click="dialogVisible = false">返回el-button>
span>
el-dialog>
div>
body>
html>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
dialogVisible: false,
innerVisible: false,
editVisible:false,
insertVisible:false,
tableData: [
{ date: new Date(), name: '汪笨湖', address: '上海市普陀区金沙江路 1518 弄' },
{ date: new Date(), name: '汪笨湖', address: '上海市普陀区金沙江路 1518 弄' },
{ date: new Date(), name: '汪笨湖', address: '上海市普陀区金沙江路 1518 弄' },
{ date: new Date(), name: '汪笨湖', address: '上海市普陀区金沙江路 1518 弄' },
{ date: new Date(), name: '汪笨湖', address: '上海市普陀区金沙江路 1518 弄' }
],
editForm: {},
editIndex:-1,
deleteIndex:-1,
inputFromWidth:300,
rules:{
//date日期需要指定type,否则校验一致不通过
date:[{type:"date",required:true,message:'请输入日期',triggle:'change'}],
name:[{required:true,message:"请输入姓名",triggle:'blur'}],
address:[{required:true,message:'请选择地址',triggle:'change'}],
},
addresses:["江苏省苏州市",'安徽省淮北市','上海市浦东区','河南省郑州市']
}
},
methods: {
//主页面-打开表格页面按钮钩子
openDialog() {
this.dialogVisible = true
},
//表格弹窗-右上方叉号钩子
handleClose(done) {
this.$confirm(`确认关闭弹框吗？`).then(_ => {
done();
}).catch(_ => { });
},
//表格弹窗-编辑按钮钩子
editData(index,row){
this.innerVisible = true;
this.editVisible = true;
let editForm = {
date:row.date,
name:row.name,
address:row.address
}
this.editForm = editForm
this.editIndex = index
},
//表格弹窗-日期格式化钩子
formatDate(row){
let date = row.date;
return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
},
//表格弹窗-删除弹框-确认按钮钩子
deleteAction(index){
this.tableData.splice(index,1);
this.$message.success('删除成功!')
},
//表格弹窗-删除弹框-取消按钮钩子
cancel(index){
console.log(index)
},
//表格弹窗-新增按钮的钩子
showAdd(){
this.innerVisible = true;
this.insertVisible = true;
},
//表单弹窗-新增按钮钩子
insertAction(){
this.$refs["editForm"].validate((valid) =>{
if(valid){
this.tableData.push(this.editForm)
this.cancelAction()
this.$message.success(`新增成功!`)
}else{
}
})
},
//表单弹窗-取消按钮钩子
cancelAction(){
this.insertVisible = false
this.editVisible = false
this.innerVisible = false
this.editForm = {}
this.editIndex = -1
},
//表单弹框-修改按钮钩子
//splice(开始下标，删除个数，替换内容)
editAction(){
console.log(this.editForm)
this.$refs["editForm"].validate((valid)=>{
if(valid){
let index = this.editIndex
this.tableData.splice(index,1,this.editForm)
this.cancelAction()
this.$message.success('修改成功!')
}
})
},
},
})
script>