【vue】vue高级特性之动态组件&异步组件component（多组件不同顺序渲染）：

---

一、效果:

二、实现:

<template>
  <div class="Analysis">
    <span class="showAndHide" @click="visible = true">显示与隐藏</span>

    <!-- 栏目信息 -->
    <ColumnList ref="ColumnList" v-if="columnList.includes('ColumnList')" />

    <div class="AnalysisContent">
      <div v-if="item != 'ColumnList'" v-for="(item, index) in columnList" :key="index">
        <component :is="item"></component>
      </div>
    </div>

    <!-- 显示/隐藏模块弹框 -->
    <a-modal v-model="visible" title="显示/隐藏" @ok="handleOk">
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <img src="~@/assets/orderImg/dashboard-1.png" alt="" style="width: 15px;height: 15px;margin-right:20px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i>勾选需要显示的模块,并输入显示的排序序号
      </div>
      <div v-for="(item, index) in dataList" :key="index" class="checkboxContent">
        <div class="ebox"><a-checkbox v-model="item.isChecked" /><i>{{ item.name }}</i></div>
        <div class="ebox"><span>序号:</span><a-input v-model="item.sort" type="number" size="small"
            :disabled="item.title == 'ColumnList'" style="width:80px;" /></div>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { mixinDevice } from '@/utils/mixin'
import { triggerWindowResizeEvent } from '@/utils/util'

export default {
  name: "Analysis",
  mixins: [mixinDevice],
  components: {
    ColumnList: () => import('./components/ColumnList.vue'),
    WeighRatio: () => import('./components/WeighRatio.vue'),
    QueueList: () => import('./components/QueueList.vue'),
    OrderRadio: () => import('./components/OrderRadio.vue'),
    OrderPieEchart: () => import('./components/OrderPieEchart.vue'),
    CustomerEchart: () => import('./components/CustomerEchart.vue'),
    DeviceInfoList: () => import('./components/DeviceInfoList.vue'),
    CarAmount: () => import('./components/CarAmount.vue'),
  },
  data() {
    return {
      visible: false,
      columnList: [],
      dataList: [//全部栏目数据
        { name: '栏目信息', title: 'ColumnList', isChecked: true, sort: 0 },
        { name: '今日过磅占比', title: 'WeighRatio', isChecked: true, sort: 1 },
        { name: '货品排队信息', title: 'QueueList', isChecked: true, sort: 2 },
        { name: '订单完成率', title: 'OrderRadio', isChecked: true, sort: 3 },
        { name: '订单统计', title: 'OrderPieEchart', isChecked: true, sort: 4 },
        { name: '客户提货量Top10', title: 'CustomerEchart', isChecked: true, sort: 5 },
        { name: '设备运行状态', title: 'DeviceInfoList', isChecked: true, sort: 6 },
        { name: '过磅车数统计', title: 'CarAmount', isChecked: true, sort: 7 },
      ],
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    loadData() {
      if (localStorage.getItem('AnalysisDataList')) {//判断是否存在已选栏目的数据
        this.dataList = JSON.parse(localStorage.getItem('AnalysisDataList'))
      }
      this.dataList = this.dataList.sort(this.sortByQueryParams('sort'))
      this.columnList = []
      this.dataList.forEach(i => {
        if (i.isChecked == true) { this.columnList.push(i.title) }
      })
      triggerWindowResizeEvent()
      console.log("显示的模块：", this.columnList)
    },
    handleOk() {
      localStorage.setItem('AnalysisDataList', JSON.stringify(this.dataList))
      this.visible = false
      this.loadData()
    },
    sortByQueryParams(property, asc = true) {
      asc = asc && asc == true ? -1 : 1  //默认升序
      return function (value1, value2) {
        let a = value1[property]
        let b = value2[property]
        return a < b ? asc : a > b ? asc * -1 : 0
      }
    },
  }
}
</script>

<style scoped>
@import '~@assets/less/common.less';

>>>.ant-checkbox-wrapper {
  margin-bottom: 14px;
}
</style>
<style scoped lang="less">
.Analysis {
  width: 100%;
  height: 100%;
  font-weight: normal;
  background: #fff;
  position: relative;

  .showAndHide {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
    font-size: 14px;
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid #1890FF;
    cursor: pointer;
  }

  .AnalysisContent {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    div {
      flex: 1;
      min-width: 600px;
    }
  }
}

.checkboxContent {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-weight: 500;
  display: flex;
  align-items: center;

  .ebox {
    flex: 1;
    display: flex;
    align-items: center;

    /deep/ .ant-checkbox-wrapper {
      margin-bottom: unset !important;
    }

    i {
      width: 200px;
      font-style: normal;
      padding: 0 10px;
      font-weight: bold;
    }

    span {
      color: #1890FF;
      padding: 0 5px 0 0;
    }
  }
}
</style>

三、说明: