component这里为什么是这种形式，而不是直接用一个组件名呢，因为当路由开始多起来的时候，一下把所有的组件都加载进来会非常非常慢且会加载到许多当时并没有用到的组件，通过import这种形式，可以让webpack将路由变换时用到的组件分开打包，网页会根据使用情况再进行
由于router是vue的组件，所以使用时记得要Vue.use一下。
7. 联系人列表页 — contact/list.vue
<template>
<div class="contact-list">
<div class="contact-list-header">
<el-button @click="goToNew" type="primary">新增联系人</el-button>
</div>
<div class="contact-list-content">
<template>
<div class="contact-list-wrap">
<h3>高级检索</h3>
<el-form ref="contactSearch" :model="searchParams" :inline=true>
<el-form-item label="姓名">
<el-input v-model="searchParams.name" placeholder="请输入需要检索的姓名"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" size="mini" round @click="contactSearch('contactSearch')">搜索</el-button>
</div>
<div class="contact-list-wrap">
<h3>联系人列表</h3>
<el-table
:data="listNewData"
style="width: 100%"
@row-click="viewContact"
:default-sort="{prop: 'name', order: 'descending'}"
>
<el-table-column
label="姓名"
prop="name"
sortable
width="180">
</el-table-column>
...
<el-table-column
label="功能">
<template scope="scope">
<el-button size="mini" type="primary" @click.stop="editContact(scope)">编辑</el-button>
<el-button size="mini" @click.stop="deleteContact(scope)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
</div>
<contact-view ref="contactView" :viewData="curData" :viewShow.sync="viewShow"></contact-view>
</div>
</template><script>
import contactView from './View.vue'
export default {
data () { ... },
components: {
contactView
},
computed: {
listNewData: function () { ... },
mounted: function () {
this.listData = this.utils.getLocalStorage('vueContact')
},
methods: {
goToNew: function () {
this.$router.push('/contact/edit')
},
sexFormatter: function (row) { ... },
deleteContact: function (res) {
let data = res.row
this.$confirm('此操作将永久删除该联系人, 是否继续?', '提示', {
confirmButtonText: '确定',
