概述
需求：需要在先有的页面上增加一个“查看处理人”的按钮，点击查看处理人，弹出子组件，将参数传递给子组件，初始化的时候created方法中发送请求到后台，接收到后台返回的JSON数据后，解析JSON展示到页面上。
下面的描述可能不正确，刚接触Vue2.x ，请多见谅
实现过程
使用的组件库是iView2.x版本。
Step1: 父组件设置Button按钮
Step2: 这里使用了showHandlerFlag来控制子组件是否显示，所里需要在data中定义下这个变量
data可以理解为存放本Vue组件中使用的变量的地方
https://cn.vuejs.org/v2/api/#data
Step3: 引用声明组件
先import ,然后再component中定义import的组件。
上图还有个props ,可以理解为存放外部传递过来的参数的地方。
https://cn.vuejs.org/v2/api/#props
Step4:使用v-if条件渲染控制是否显示子组件
https://cn.vuejs.org/v2/api/#v-if
Step5: 子组件
使用template 作为根节点，承载页面
https://cn.vuejs.org/v2/api/#template
紧接着：
然后在created方法中初始化数据
最后
methods中对应自定义的方法，close方法使用$emit将关闭事件抛给父Vue.
后台返回的JSON数据如下，格式还是这个格式，下面截图的数据已经改变
{"code":0,"msg":"success","data":{"sjsh":"审核设计","sjshHandlers":["集团钱工","集团管理员"],"csjggd":"传输竣工归档","csjggdHandlers":["集团钱工","集团管理员"],"sdsg":"省端施工","sdsgHandlers":[{"四川省":["集团管理员","上海市李工"]},{"云南省":["集团管理员","江苏省刘工"]}]}}
子组件代码
<template> <div class="edit-user-role common-center-popover"> <div class="mask common-mask"></div> <div class="container"> <div class="header"> <div class="title"> <span>环节处理人</span> <i @click="close" class="iconfont icon-close"></i> </div> </div> <div style="margin-top: 10px"> <Table stripe :columns="columns1" :data="data1"></Table> </div> <div class="footer"> <Button type="primary" @click="close">确定</Button> </div> </div> </div> </template> <script> import { localAxios } from '@/utils/common/HttpUtil' export default { components: {}, props: { flowId: { type: String, default: '' } }, // 初始化数据 created () { localAxios.post('circuitworkflow/v1/workflow/circuit/queryCircuitAssignees/' + this.flowId) .then(response => { if (response.data.code === 0 && response.data.data) { this.info = response.data.data this.data1 = [] // 遍历 let obj = {} this.data1.push(obj) obj['tacheName'] = this.info.sjsh obj['prov'] = '' obj['assignee'] = this.info.sjshHandlers.toString() let obj1 = {} this.data1.push(obj1) obj1['tacheName'] = this.info.csjggd obj1['prov'] = '' obj1['assignee'] = this.info.csjggdHandlers.toString() this.info.sdsgHandlers.forEach(sdsgItem => { let obj2 = {} this.data1.push(obj2) obj2['tacheName'] = this.info.sdsg for (let pro in sdsgItem) { obj2['prov'] = pro obj2['assignee'] = sdsgItem[pro].toString() } }) } }) }, data () { return { columns1: [ { title: '环节名称', key: 'tacheName' }, { title: '处理省份', key: 'prov' }, { title: '处理人', key: 'assignee' } ], data1: [ // { // tacheName: '初始数据', // prov: '初始数据', // assignee: '初始数据' // } ] } }, methods: { close () { this.$emit('close') } } } </script> <style lang="less" scoped> @deep: ~">>>"; .specialBtn { margin-left: 30px; background: #cadfff; color: #3586ff; } .uploadFileBtn { margin-left: 0; border-color: #2d8cf0; } .ivu-form-item { margin-bottom: 5px; vertical-align: top; zoom: 1; } .edit-user-role { z-index: 100; .container { width: 800px; height: 630px; z-index: 1; background: #fff; border-radius: 4px; position: relative; display: flex; flex-direction: column; .header { background: #4285f4; flex: 0 0 50px; line-height: 50px; border-radius: 4px 4px 0 0; .title { color: #fff; font-size: 14px; text-align: center; padding: 0 14px; & > span { /*float: left;*/ font-size: 16px; } .icon-close { cursor: pointer; float: right; font-size: 14px; } } } .content { flex: 1; display: flex; .select-roles { display: inline-block; flex: 1; overflow: auto; .title { line-height: 40px; padding-left: 20px; font-size: 14px; background: rgba(241, 244, 249, 0.3); } } .optional-roles { border-right: 1px solid #ebeef5; .checkbox { margin-left: 20px; & @{deep} .ivu-checkbox-group-item { width: 113px; line-height: 25px; } .selected-all { margin: 10px 0; } } } .arrow { flex: 0 0 40px; display: flex; justify-content: center; align-items: center; color: RGBA(232, 232, 232, 0.6); } .selected-roles { border-left: 1px solid #ebeef5; .selected-role-item { width: 120px; line-height: 28px; background: rgba(241, 244, 249, 0.6); border-radius: 4px; display: inline-block; font-size: 12px; padding: 0 8px; margin: 5px 0 5px 13px; .delete-btn { color: #c0ccda; float: right; cursor: pointer; .iconfont { font-size: 12px; } } } } } .footer { position: absolute; top: 585px; flex: 0 0 45px; width: 100%; line-height: 45px; background: #fafafa; border-radius: 0 0 4px 4px; text-align: center; .buttons { float: right; margin-right: 15px; button { width: 90px; } } } } } .common-center-popover { position: fixed; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: flex; justify-content: center; align-items: center; .common-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: #ccc; opacity: 0.4; } .ivu-tabs { color: #1f2d3d; } .span1 { display: inline-block; overflow: hidden; height: 32px; line-height: 32px; } .span2 { display: inline-block; overflow: hidden; height: 32px; line-height: 32px; } } </style>
