2021-09-03 子组件调用父组件数据并渲染表格

子组件调用父组件数据并渲染表格

1、父组件的子组件

  <!--        折叠面板：表格-->
        <div class="collapse">
          <app-policy-tabs ref="appPolicyTabs" @msg="handleEvent"></app-policy-tabs>
        </div>

2、在父组件引入子组件

import AppPolicyTabs from '../components/TaskDispatch/AppPolicyTabs'

3、父组件：暴露

export default {
  name: 'TaskDispatch',
  components: {
    AppPolicyTabs,
  },

4、父组件：数据渲染

data() {
    return {
      mplsData: [],
    }
  },

5、父组件：获取数据

methods:{
    // 获取策略信息
    getMplsData() {
      this.$axios
          .get('/restconf/config/networkopt-service:srMplsQos')
          .then(res => {
            this.mplsData = res.data.srMplsQos.policy
            this.propMplsData()
          })
          .catch(err => {
            if (err.response) {
              this.$message.error(err.response.status + ' ' + err.response.statusText)
            } else {
              this.$message.error('Timeout')
            }
          })
    },
    }

6、父组件：策略信息传入需求的子组件

  // 策略信息传入需求的子组件
    propMplsData() {
      this.$refs.appPolicyTabs.setMplsData(this.mplsData)
      this.$refs.newStrategyExecution.setMplsData(this.mplsData)
    },

7、父组件挂载

 mounted() {
    this.getMplsData()
  },

8、子组件：

<template>
  <div>
    <el-tabs type="border-card">

      <el-tab-pane label="　SR-MPLS　">
        <el-collapse v-model="activeNames[0]">
          <el-collapse-item title="　应用状态信息列表" name="1">
            <mpls-table type="app" ref="mplsAppTable" @msg="handleEvent"></mpls-table>
          </el-collapse-item>
          <el-collapse-item title="　应用策略信息列表" name="2">
            <mpls-table type="policy" ref="mplsPolicyTable" @msg="handleEvent"></mpls-table>
          </el-collapse-item>
        </el-collapse>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>


<script>
import mplsTable from './mplsTable'

export default {
  name: 'AppPolicyTabs',
  components: {
    mplsTable,
  },
  data() {
    return {
      activeNames: [['1', '2'], ['1', '2']],
    }
  },
  methods: {
    // 父组件调用
    setMplsData(data) {
      this.$refs.mplsAppTable.setData(data)
      this.$refs.mplsPolicyTable.setData(data)
    },

    // 处理子组件emit的事件，根据参数不同分发给不同的方法进一步处理
    handleEvent(e) {
      if (e.msg === 'edit') {
        this.$emit('msg', e)
      }
    },
  },
}
</script>


<style scoped>
/deep/ .el-tabs__item {
  font-size: 24px !important;
  line-height: 50px;
  height: 50px;
}

/deep/ .el-tabs__content {
  padding: 0 !important;
}

/deep/ .el-collapse {
  border: 0 !important;
}

/deep/ .el-collapse-item__header {
  font-size: 20px !important;
  font-weight: bold !important;
  /*color: #02A7F0;*/
}
</style>

9、子组件引入的Vue

<template>
  <div>
    <!--    按钮-->
    <el-row style="margin-bottom: 20px;">
      <el-col :span="5" :offset="18">
        <el-input
            v-model="keyword"
            placeholder="请输入查询信息"
            prefix-icon="el-icon-search"
            @change="handleInputChange"></el-input>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="22" :offset="1">
        <!--        表格-->
        <el-table
            tooltip-effect="light"
            style="width: 100%"
            border
            :data="displayData">

          <el-table-column
              type="selection"
              width="55"
              align="center"
              v-if="auth==='0'||auth==='1'">
          </el-table-column>

          <!--          应用信息-->
          <template v-if="type==='app'">
            <el-table-column
                label="应用名称"
                prop="appName"
                align="center"
                :formatter="placeholder">
            </el-table-column>

            <el-table-column
                label="应用描述"
                prop="appDescription"
                align="center"
                :formatter="placeholder">
            </el-table-column>

            <el-table-column
                label="源设备"
                prop="sourceNode"
                align="center"
                :formatter="placeholder">
            </el-table-column>

            <el-table-column
                label="目标设备"
                prop="destNode"
                align="center"
                :formatter="placeholder">
            </el-table-column>

            <el-table-column
                label="隧道选择"
                prop="tunnelSelect"
                align="center"
                :formatter="placeholder">
            </el-table-column>
          </template>

          <!--          策略信息-->
          <template v-if="type==='policy'">
            <el-table-column
                label="策略名称"
                prop="policyName"
                align="center"
                :formatter="placeholder">
            </el-table-column>

            <el-table-column
                label="带宽(Mb)"
                prop="bandwidth"
                align="center"
                :formatter="placeholder">
            </el-table-column>

            <el-table-column
                label="时延(ms)"
                prop="delay"
                align="center"
                :formatter="placeholder">
            </el-table-column>

            <el-table-column
                label="抖动(ms)"
                prop="jitter"
                align="center"
                :formatter="placeholder">
            </el-table-column>

            <el-table-column
                label="丢包(%)"
                prop="loss"
                align="center"
                :formatter="placeholder">
            </el-table-column>

            <el-table-column
                label="必经链路"
                prop="necessaryLink"
                align="center"
                :formatter="placeholder">
            </el-table-column>

            <el-table-column
                label="避开链路"
                prop="evadeLink"
                align="center"
                :formatter="placeholder">
            </el-table-column>
          </template>

          <el-table-column
              label="操作"
              align="center"
              v-if="auth==='0'||auth==='1'">
            <template slot-scope="scope">
              <el-button type="text" style="padding: 0;font-size: 16px;" @click="editApp(scope)">编辑</el-button>
              <el-button type="text" style="padding: 0;font-size: 16px;" @click="deleteApp(scope)">删除</el-button>
            </template>
          </el-table-column>

        </el-table>
        <el-divider></el-divider>

        <!--        分页-->
        <!--        <div style="text-align: center">
                  <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :page-sizes="[5, 10]"
                      :page-size="size"
                      :current-page="isSearching?searchPage:page"
                      layout="total, sizes, prev, pager, next"
                      :total="isSearching?searchData.length:appData.length"
                      popper-class="dropdown">
                  </el-pagination>
                </div>-->

        <!--        分页-->
        <div style="text-align: center">
          <el-pagination
              @current-change="handleCurrentChange"
              :page-size="size"
              :current-page="isSearching?searchPage:page"
              layout="total, prev, pager, next"
              :total="isSearching?searchData.length:appData.length">
          </el-pagination>
        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  name: 'mplsTable',
  props: {
    type: String,
  },
  data() {
    return {
      page: 1,
      size: 10,
      searchPage: 1,
      isSearching: false,
      displayData: [],
      appData: [],
      searchData: [],
      keyword: '',
      auth: '',
    }
  },
  created() {
    this.auth = sessionStorage.getItem('auth')
  },
  methods: {
    // 父组件调用
    setData(data) {
      this.appData = data
      this.changeDisplay()
    },

    // 编辑事件，触发父元素监听
    editApp(scope) {
      this.$emit('msg', {
        msg: 'edit',
        type: 'mpls',
        data: scope.row,
      })
    },

    // 删除应用
    deleteApp(scope) {
      this.$axios
          .delete('/restconf/config/networkopt-service:srMplsQos/policy/' + scope.row['policy-id'])
          .then(res => {
            console.log(res)
          })
    },

    // 单页条目数改变
    handleSizeChange(size) {
      this.pageSize = size
      this.changeDisplay()
    },

    // 页码改变
    handleCurrentChange(page) {
      if (this.isSearching) {
        this.searchPage = page
      } else {
        this.page = page
      }
      this.changeDisplay()
    },

    // 根据页码、单页条目数改变显示内容
    changeDisplay() {
      let start = this.size * ((this.isSearching ? this.searchPage : this.page) - 1)
      let end = start + this.size
      this.displayData = (this.isSearching ? this.searchData : this.appData).slice(start, end)
    },

    // 处理搜索框内容变化，失焦或按下回车后触发
    handleInputChange() {
      if (this.keyword) {
        this.searchPage = 1
        this.searchData = this.appData.filter(element => {
          return element.appName.includes(this.keyword)
              || element.appDescription.includes(this.keyword)
        })
        this.isSearching = true
        this.changeDisplay()
      } else {
        this.isSearching = false
        this.changeDisplay()
      }
    },

    //  表格undefined占位符
    placeholder(row, column, value) {
      return value ?? '-'
    },
  },
}
</script>

<style scoped>
/deep/ .el-table {
  font-size: 18px !important;
}

/deep/ .el-pagination__total {
  font-size: 18px !important;
}

/deep/ .el-pager li {
  font-size: 18px !important;
}
</style>