<table> <tr> <th>名称</th> <th>链接状态</th> <th>IP</th> <th>特例类型</th> <th>所属城市</th> <th>所属机房</th> </tr> <tr v-cloak v-for="(item, index) of slist"> <td>{{item.name}}</td> <td>{{item.username}}</td> <td>{{item.email}}</td> <td>{{item.sex}}</td> <td>{{item.province}}</td> <td>{{item.hobb}}</td> <!--<td><a href="javascript:;" @click="showOverlay(index)">修改</a> | <a href="javascript:;" @click="del(index)">删除</a></td>--> </tr> </table>
css:
[v-cloak] { display: none } table { border: 1px solid #ccc; padding: 0; border-collapse: collapse; table-layout: fixed; /*margin-top: 10px;*/ width: 100%; margin-top: 45px; } table td, table th { height: 30px; border: 1px solid #ccc; background: #fff; font-size: 2vh; padding: 12px 3px 6px 8px; color: #666666; font-weight: 300; } table th:first-child { width: 4rem; } .container, .st { /*width: 1000px;*/ margin: 10px auto 0; font-size: 13px; font-family: '微软雅黑' } .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: 8rem; } .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); /*margin-top: -150px;*/ padding: 20px; } .span_1{ font-size: 18px; color: #666666; }
js:
Vue.component('model', { template: '', props: ['list', 'isactive'], computed: { modifylist() { return this.list; } }, methods: { changeActive() { this.$emit('change'); }, modify() { this.$emit('modify', this.modifylist); }, add(){ } } }); var app = new Vue({ el: '#app', data: { isActive: false, selected: -1, selectedlist: {}, slist: [], searchlist: [], list: [ { name:'Fe1', username: '开', email: '221.122.62.221', sex: '特例1', province: '北京', hobb:'电子机房' }, { name:'Fe2', username: '关', email: '192.168.12.222', sex: '特例2', province: '上海', hobb: '服务机房' }, { name:'Fe3', username: '开', email: '127.255.255.255', sex: '特例3', province: '重庆', hobb: '遥控机房' }, { name:'Fe4', username: '关', email: '223.255.255.255', sex: '特例4', province: '北京市', hobb:'内网机房' } ] }, created() { 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); this.selected = -1; } else { this.list.push(arr); } this.setSlist(this.list); this.changeOverlay(); }, 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() { var v = $('.search').val(), self = this; self.searchlist = []; if (v) { var ss = []; // 过滤需要的数据 this.list.forEach(function (item) { if (item.province.indexOf(v) > -1) { if (self.searchlist.indexOf(item.province) == -1) { self.searchlist.push(item.province); } ss.push(item); } else if (item.hobb.indexOf(v) > -1) { if (self.searchlist.indexOf(item.hobb) == -1) { self.searchlist.push(item.hobb); } ss.push(item); } }); this.setSlist(ss); // 将过滤后的数据给了slist } else { // 没有搜索内容，则展示全部数据 this.setSlist(this.list); } } }, watch: { } })