文章目錄

• 概述
• 實現過程
• Step1: 父元件設定Button按鈕
• Step2: 這裡使用了showHandlerFlag來控制子元件是否顯示，所裡需要在data中定義下這個變數
• Step3: 引用宣告元件
• Step4:使用v-if條件渲染控制是否顯示子元件
• Step5: 子元件
• 子元件程式碼

概述

需求：需要在先有的頁面上增加一個“檢視處理人”的按鈕，點選檢視處理人，彈出子元件，將引數傳遞給子元件，初始化的時候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>