<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../js-css/js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="../js-css/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js-css/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../js-css/css/bootstrap.min.css" />
<style type="text/css">
* {
margin-top: 30px;
}
.data-table {
width: 800px;
margin: auto;
}
.data-table button:nth-of-type(1) {
background-color: red;
color: #FFFFFF;
outline: none;
border: 1px solid red;
border-radius: 10px;
}
.data-table button:nth-of-type(2) {
background-color: blue;
color: #FFFFFF;
outline: none;
border: 1px solid blue;
border-radius: 10px;
}
.modalss {
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;
}
.close {
position: absolute;
top: -25px;
right: 0;
height: 44px;
line-height: 44px;
text-align: center;
width: 44px;
color: orangered;
cursor: pointer;
}
.modal-body {
margin-top: -50px;
}
.modal-body input {
margin-top: 20px;
width: 250px;
}
.modal-body button {
width: 60px;
height: 30px;
font-size: 18px;
color: #409efe;
background-color: #edf3ff;
outline: none;
border: #409efe solid 1px;
border-radius: 10px;
margin-left: 40px;
margin-top: 10px;
}
.modal-body button:nth-of-type(1) {
color: #edf3ff;
background-color: #409efe;
}
</style>
</head>
<body>
<div id="app">
<!-- 添加信息部分 -->
<modal :visible="showModal" @update="showModal=$event;">
<h3 slot="tiltle" style="text-align: center; line-height: 50px;">编辑</h3>
<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 class="data-table">
<div class="form-inline">
<div class="form-group">
<input type="text" class="form-control" placeholder="输入标题" v-model="title">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="输入发布人" v-model="user">
</div>
<div class="form-group">
<input type="date" class="form-control" placeholder="输入日期" v-model="date">
<button type="submit" class="btn btn-default" @click="add()">新增</button>
</div>
</div>
<!-- 表格遍历部分 -->
<table class="table table-condensed">
<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>
</div>
</div>
<script type="text/javascript">
/* 局部组件*/
const modal = {
template: `
<div class="modalss" v-if="visible">
<div class="modal-content">
<div class="modal-head">
<slot name="tiltle"></slot>
</div>
<div class="modal-body">
<slot name="content"></slot>
<span class="close" @click="call()">X</span>
</div>
</div>
</div>
`,
props: {
"visible": {
type: Boolean,
default: false,
//接收父组件传入的值
//组件的显示与隐藏有visible来控制
}
},
methods: {
call() {
//将弹出框关闭，没有进行任何操作
console.log(1)
this.$emit('update', false);
}
}
}
/* vue */
new Vue({
el: "#app",
components: {
modal
},
data: {
list: [{
title: "移动开发",
user: "安比",
date: "2020/12/20"
}, {
title: "pc开发",
user: "安东尼",
date: "2020/12/20"
}, ],
/* 需要添加的数据临时存放地 */
title: "",
user: "",
date: "",
current: {}, //正在编辑的数据
editIndex: {}, //当前编辑的下标
showModal: false, //模态框的显示与隐藏
},
methods: {
/* 添加数据 */
add() {
if (this.title != "" && this.user != "" && this.date != "") {
let temp = {
title: this.title,
user: this.user,
date: this.date
};
console.log(this.list)
this.list.unshift(temp);
/* 将值重新设为空 */
this.title = "";
this.user = "";
this.date = "";
} 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("数据没有删除")
}
},
editItem(item, index) {
this.editIndex = index;
this.current = { ...item
};
/* 对传进来的item数据进行解构
，因为item是引用类型，如果不
进行解构会导致变修改数据一起变化 */
this.showModal = true;
console.log(this.showModal)
},
sureHd() {
this.list[this.editIndex] = { ...this.current
};
this.showModal = false;
},
cancelHd() {
this.showModal = false;
},
}
})
</script>
</body>
</html>
vue增删改图表加样式
