[v-cloak] {
display: none
}
table {
border: 1px solid #ccc;
padding: 0;
border-collapse: collapse;
table-layout: fixed;
margin-top: 10px;
width: 100%;
}
table td,
table th {
height: 30px;
border: 1px solid #ccc;
background: #fff;
font-size: 15px;
padding: 3px 3px 3px 8px;
}
table th:first-child {
width: 30px;
}
.container,
.st {
width: 1000px;
margin: 10px auto 0;
font-size: 13px;
font-family: 'Microsoft YaHei'
}
.container .search {
font-size: 15px;
padding: 4px;
}
.container .add {
padding: 5px 15px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 6;
background: rgba(0, 0, 0, 0.7);
}
.overlay td:first-child {
width: 66px;
}
.overlay .con {
position: absolute;
width: 420px;
min-height: 300px;
background: #fff;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
padding: 20px;
}
Vue.component('model', {
props: ['list', 'isactive'],
template: `<div class="overlay" v-show="isactive">
<div class="con">
<h2 class="title">新增 | 修改</h2>
<div class="content">
<table>
<tr>
<td>用户名</td>
<td><input type="text" v-model="modifylist.username"></td>
</tr>
<tr>
<td>邮箱</td>
<td><input type="text" v-model="modifylist.email"></td>
</tr>
<tr>
<td>性别</td>
<td>
<label><input type="radio" name="sex" value="男" v-model="modifylist.sex">男</label>
<label><input type="radio" name="sex" value="女" v-model="modifylist.sex">女</label>
<label><input type="radio" name="sex" value="未知" v-model="modifylist.sex">未知</label>
</td>
</tr>
<tr>
<td>省份</td>
<td>
<select name="" id="" v-model="modifylist.province">
<option value="北京市">北京市</option>
<option value="河北省">河北省</option>
<option value="河南省">河南省</option>
<option value="重庆市">重庆市</option>
<option value="广东省">广东省</option>
<option value="辽宁省">辽宁省</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<label><input type="checkbox" v-model="modifylist.hobby" value="篮球">篮球</label>
<label><input type="checkbox" v-model="modifylist.hobby" value="读书">读书</label>
<label><input type="checkbox" v-model="modifylist.hobby" value="插画">插画</label>
<label><input type="checkbox" v-model="modifylist.hobby" value="编程">编程</label>
<label><input type="checkbox" v-model="modifylist.hobby" value="弹琴">弹琴</label>
</td>
</tr>
</table>
<p>
<input type="button" @click="changeActive" value="取消">
<input type="button" @click="modify" value="保存">
</p>
</div>
</div>
</div>`,
computed: {
modifylist() {
return this.list;
}
},
methods: {
changeActive() {
this.$emit('change');
},
modify() {
this.$emit('modify', this.modifylist);
}
}
});
var app = new Vue({
el: '#app',
data: {
isActive: false,
selected: -1,
selectedlist: {},
slist: [],
searchlist: [],
list: [
{
username: 'aaaaa',
email: '123@qq.com',
sex: '男',
province: '北京市',
hobby: ['篮球', '读书', '编程']
},
{
username: 'bbbbb',
email: 'bbbbbbb@163.com',
sex: '女',
province: '河北省',
hobby: ['弹琴', '读书', '插画']
},
{
username: 'aaabb',
email: 'abababab@qq.com',
sex: '女',
province: '重庆市',
hobby: ['篮球']
},
{
username: 'cccccc',
email: '123@qq.com',
sex: '男',
province: '北京市',
hobby: ['篮球', '读书', '编程']
},
{
username: 'dddddd',
email: 'bbbbbbb@163.com',
sex: '女',
province: '河北省',
hobby: ['弹琴', '读书', '插画']
},
{
username: 'eeeee',
email: 'abababab@qq.com',
sex: '女',
province: '重庆市',
hobby: ['篮球']
}
]
},
created() {
console.log(Date.now());
this.setSlist(this.list);
},
methods: {
showOverlay(index) {
this.selected = index;
this.selectedlist = this.list[index];
this.changeOverlay();
},
modify(arr) {
if (this.selected > -1) {
Vue.set(this.list, this.selected, arr);
} else {
this.list.push(arr);
}
this.setSlist(this.list);
this.changeOverlay();
},
add: function () {
this.selectedlist = {
username: '',
email: '',
sex: '男',
province: '北京市',
hobby: []
};
this.isActive = true;
},
del(index) {
this.list.splice(index, 1);
this.setSlist(this.list);
},
changeOverlay() {
this.isActive = !this.isActive;
},
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
},
search(e) {
var v = e.target.value,
self = this;
self.searchlist = [];
if (v) {
var ss = [];
this.list.forEach(function (item) {
if (item.username.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.username) == -1) {
self.searchlist.push(item.username);
}
ss.push(item);
} else if (item.email.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.email) == -1) {
self.searchlist.push(item.email);
}
ss.push(item);
}
});
this.setSlist(ss);
} else {
this.setSlist(this.list);
}
}
},
watch: {
}
})