Vue2.x-01点击按钮弹出子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>