<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.modal {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: rgba(0, 0, 0, 0.3);
}
.modal-content {
width: 300px;
height: 260px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border-radius: 20px;
overflow: hidden;
}
.modal-head {
position: relative;
height: 44px;
background-color: #f0f0f0;
line-height: 44px;
padding: 0 15px;
}
.modal-head .close {
position: absolute;
top: 0;
right: 0;
height: 44px;
line-height: 44px;
text-align: center;
width: 44px;
color: orangered;
cursor: pointer;
}
.modal-body {
margin: 15px;
}
</style>
</head>
<body>
<div id="app">
<div class="data-add ">
<input type="text" placeholder="输入标题" v-model="tiltle" />
<input type="text" placeholder="输入发布人" v-model="content" />
<input type="date" placeholder="年/月/日" v-model="time" />
<button type="button" @click="add()" >新增</button>
</div>
<hr>
<br>
<table border="1" cellspacing="1" cellpadding="1" >
<tr>
<th>序号</th>
<th>标题</th>
<th>发布人</th>
<th>发布时间</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in list" :key="item.index">
<td>{{index+1}}</td>
<td>{{item.title}}</td>
<td>{{item.user}}</td>
<td>{{item.date}}</td>
<td>
<button type="button" @click="del(index)">删除</button>
<button type="button" @click="editItem(item,index)" >编辑</button>
</td>
</tr>
</table>
<modal :visible="showModal" @update="showModal=$event;">
<p slot="tiltle">编辑</p>
<div slot="content">
<input type="text" v-model="current.title"/>
<input type="text" v-model="current.user"/>
<input type="text" v-model="current.date" />
<br>
<button type="button" @click="sureHd()">确定</button>
<button type="button" @click="cancelHd()">取消</button>
</div>
</modal>
</div>
<script type="text/javascript">
const modal = {
template: `
<div class="modal" v-if="visible">
<div class="modal-content">
<div class="modal-head">
<slot name="tiltle"></slot>
<span class="close" @click="call()">X</span>
</div>
<div class="modal-body">
<slot name="content"></slot>
</div>
</div>
</div>`,
props: {
"visible": {
type: Boolean,
default: false,
//接收父组件传入的值
//组件的显示与隐藏有visible来控制
}
},
methods:{
call() {
//将弹出框关闭，没有进行任何操作
this.$emit('update', false);
}
}
}
new Vue({
el: "#app",
components: {
modal
},
data: {
showModal: false,
list: [{
title: "移动开发",
user: "安比",
date: "2020/12/20"
}, {
title: "pc开发",
user: "安东尼",
date: "2020/12/20"
}, ],
current:{},//正在编辑的数据
editIndex:{},//当前编辑的下标
tiltle: "",
content: "",
time: "",
},
methods:{
editItem(item,index){
this.editIndex=index;//记录编辑在哪一步
this.current={...item};//把item解构，切断他们之间的联系，因为是引用类型
this.showModal=true;
},
sureHd(){
this.list[this.editIndex]={...this.current};
this.showModal=false;
},
cancelHd(){
this.showModal=false;
},
add() {
/* 将数据加入list中*/
if (this.tiltle != "" && this.content != "" && this.time != "") {
let temp = {
title: this.tiltle,
user: this.content,
date: this.time
}
this.list.unshift(temp);
this.tiltle = "";
this.content = "";
this.time = "";
} else {
alert("数据不能为空")
}
},
del(index) { //删除
console.log(index);
let flag = confirm("是否删除数据");
if (flag == true) {
for (let i in this.list) {
if (i == index) {
this.list.splice(index, 1)
}
}
} else {
console.log("数据没有删除")
}
},
}
})
</script>
</body>
</html>
vue组件的表格增删改