概述

需求：需要在先有的页面上增加一个“查看处理人”的按钮，点击查看处理人，弹出子组件，将参数传递给子组件，初始化的时候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>