cancelButtonText: '取消',
type: 'warning',
callback: (action) => {
if (action === 'confirm') {
this.$delete(this.listData, data.id)
this.utils.setLocalStorage('vueContact', this.listData)
}
}
})
},
editContact: function (res) {
let data = res.row
this.$router.push({
path: '/contact/edit', query: {id: data.id}
})
},
viewContact: function (row) {
this.viewShow = true
this.curData = this.listData[row.id] },
contactSearch: function () {
let data = this.utils.getLocalStorage('vueContact')
let newData = {}
for (let item in data) {
if (data[item].name.indexOf(this.searchParams.name) > -1) {
newData[item] = data[item] }
}
this.listData = newData
}
}
}
</script>
list.vue相当于该模块的主页，新增与编辑页面通过右上角的新建按钮或者列表中的编辑按钮进入，查看页面通过引入View.vue作为一个弹窗放在列表页中展示，不单独设置路由。
列表展示所使用的是elementUI的table组件
删除对象时一定要使用$delete，否则不会触发视图更新
view.vue代码：
<template>
<div class="contact-view">
<el-dialog :before-close="closePop" ref="myDialog" :visible="viewShow">
<el-form :model="viewData" label-width="60px">
<el-form-item label="姓名" prop="name">
<el-input :readonly="true" v-model="viewData.name"></el-input>
</el-form-item>
...
<el-form-item label="备注">
<el-input :readonly="true" type="textarea" v-model="viewData.desc"></el-input>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template><script>
export default {
props: ['viewShow', 'viewData'],
methods: {
closePop: function () {
// 需手动关闭弹窗,找到父组件中调用的地方进行事件的触发
this.$parent.$refs.contactView.$emit('update:viewShow', false)
}
}
}
</script>
这里有个比较值得注意的点，就是关闭查看弹窗，弹窗的开启关闭状态通过list也就是父级中的viewShow来控制，viewShow通过view也就是子级中的props流入到子级中，但是vue中的数据流向是默认是单向的，想要子级中修改父级属性必须使用emit，详见上面代码。
这里原先使用elementUI的dialog组件的自己的关闭，会报错，只能自己修改了。
ps: 为什么这里不用vuex处理父子组件的通信？因为如果是一个大型的后台管理系统，像这样的情况会经常发生，如果都放在vuex中管理，那vuex的体积会非常庞大，反而不利于维护。
8. 联系人编辑(新增)页 — edit.vue
