這是我參與更文挑戰的第3天，活動詳情查看：更文挑戰html

前言

閱讀前請按照順序參看系列文章,效果更佳!前端

聽說系列文章很難火爆，由於知識點包袱不夠多，因此你們看日後不太願意收藏，不過不要緊了，系列文章的好處是看着舒服，碎片化時間內很快就看完了，不是嗎？vue

1. Common 公共頁面

前面幾個小節已經闡述過，若是須要完成咱們的低代碼列表設計，那麼必然會涉及到公共組件的設計。vuex

1.1靈活的動態組件

咱們設計了 CommonLayout 組件以完成公共的功能，固然它的內容很是少，僅僅是引入了 Component組件而已。後端

下面是摘自Vue文檔介紹：api

有的時候，在不一樣組件之間進行動態切換是很是有用的，好比在一個多標籤的界面裏，上述內容能夠經過 Vue 的元素加一個特殊的 is attribute 來實現：。markdown

<!-- 組件會在 `currentTabComponent` 改變時改變 -->
<component v-bind:is="currentTabComponent"></component>
複製代碼

在上述示例中，currentTabComponent 能夠包括已註冊組件的名字，或一個組件的選項對象。app

因爲這一個組件會對應多個路由，因爲vue的優化，致使其created方法僅被調用一次。所以咱們須要完成路由切換時的加載工做。異步

1.2 難堪的異步api調用

前節的實現有些問題，由於涉及到api的調用，這個異步的方法會致使更新頁面時狀態刷新並不那麼及時，所以對上節的組件須要進行優化，以便其可以順利加載數據。ide

先控制顯示，這裏引入initCom變量，在未準備好以前先不顯示組件。這樣作會有少量時間頁面空白~~~ 暫時未找到合適的方案；

<template>
  <div class="app-container">
    <keep-alive v-if="initCom">
      <component :is="realCompoonent" v-if="realCompoonent" :guid="guid" />
      <common-layout v-else :guid="guid" />
    </keep-alive>

  </div>
</template>
複製代碼

再控制api請求，在路由切換前，加載列表定義模型數據，一旦加載完畢，再刷新vuex數據，並加載實際的組件

beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.guid = vm.getGuid(to)
      if (vm.hasExpire(vm.udf, vm.guid)) {
        const http = new Http()
        http.fetch({
          url: `/Tools/GetModelDefine/${vm.guid}`,
          method: 'get',
        }).then(data => {
          vm.$store.dispatch('udf/setUdfModelData', { guid: vm.guid, data })
          vm.init(to)
        })
      } else {
        vm.init(to)
      }
    })
  },

init(route) {
      const path = route.path
      try {
        this.realCompoonent = require(`@/views${path}`).default
        // this.$router.push(this.realCompoonent)
      } catch (ex) {
        console.log(`load sub com [${path}] failed. ${ex}`)
        this.realCompoonent = null
      }
      this.initCom = true
    },
複製代碼

按照這樣的修改，終於在頁面刷新、菜單來回切換時表現正常了。

2.CommonLayout 組件

在沒有定義 realCompoonent 組件頁面時，咱們會自動的使用 CommonLayout組件顯示。

2.1 這個表格有點醜

其主要按照列表形式展示咱們定義的表單，作好的效果以下：

2.2 模型元數據

其主要按照模型定義，進行解析並展示。經過Common頁面組件，咱們已經順利的拿到模型定義數據，並放在vuex內，所以本組件只須要拿到guid參數，而後到vuex內查詢數據便可。

2.3 那咱們就定義一個guid屬性先。

export default {
  name: 'CommonLayout',
  mixins: [mixClass],
  props: {
    guid: { type: String, default: '' },
  },
  data() {
    return {}
  },
 }
複製代碼

2.4 引入 mapGetters 獲取vuex數據。

import { mapGetters } from 'vuex'
...
computed: {
    ...mapGetters(['udf']),
    templateModel() {
      // console.log(this.udf.get(this.guid))
      return this.udf.get(this.guid)
    },
    showSummary() {
      const index = this.templateModel.listTemplate.findIndex(
        item => item.isSum == 1,
      )
      return index != -1
    },
  },
複製代碼

2.5 爲了獲取後臺列表數據，咱們引用mixins擴展類。

混入 (mixin) 提供了一種很是靈活的方式，來分發 Vue 組件中的可複用功能。一個混入對象能夠包含任意組件選項。當組件使用混入對象時，全部混入對象的選項將被「混合」進入該組件自己的選項。當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行「合併」。更多合併規則，能夠參考vue文檔。

在混入類，咱們會按照約定規則調用分頁數據api。

getlistApi(params) {
  const model = this.templateModel.model.modelName
  return this.$http.fetch({
    url: `/${model}/Get${model}Page`,
    method: 'post',
    params: params,
  })
},
複製代碼

2.6 一樣的，爲了保證數據的加載，咱們監視$route

監視$rout，以便在created方法不被調用時刷新數據。

watch: {
    $route: function(to, from) {
      this.reset()
      this.fetchData()
    },
  },
複製代碼

2.7 按照模型定義，咱們顯示或隱藏表格的序號和多選框列。

<el-table-column
v-if="templateModel.model.listShowSelect == 1"
 type="selection"
 width="55"
/>
<el-table-column v-if="templateModel.model.listShowNo == 1" type="index" align="center" width="50" label="#" :index="table_index" />
複製代碼

2.8 增長列表的排序功能以及合併功能

<el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row :show-summary="showSummary" :summary-method="getSummaries" @current-change="handleCurrentChange" @sort-change="sortList" >
複製代碼

2.9 列表合計功能

合併功能須要按照列設置進行顯示，所以須要自定義getSummaries方法。實現的方法以下：

getSummaries(param) {
      const list = this.templateModel.listTemplate
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合計'
          return
        }

        if (column.property) {
          const item = list.find(o => o.fieldName.toLowerCase() == column.property.toLowerCase())
          console.log(item)
          if (item && item.isSum == 1) {
            const values = data.map(item => Number(item[column.property]))
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr)
              if (!isNaN(value)) {
                return prev + curr
              } else {
                return prev
              }
            }, 0)
          // sums[index]
          }
        }
      })
      return sums
    },
複製代碼

2.10 列定義

按照模型的列表定義，拉取列，並顯示。這裏定義了寬度、列名、對齊、屬性、以及對日期數據進行格式化。固然還能夠按照控件類型進行擴展。

<el-table-column v-for="(item, index) in templateModel.listTemplate" :key="index" :label="$t(templateModel.model.modelName + '.' + item.fieldName)" :width="item.width <= 0 ? 0 : item.width" :align="item.controlType == 'Number' ? 'right' : 'left'" :sortable="item.isSort == 1 ? 'custom' : false" :prop="firstLower(item.fieldName)" >
        <template slot-scope="scope">
          <template v-if="item.controlType == 'Text'">
            {{ scope.row[firstLower(item.fieldName)] }}
          </template>
          <template v-else-if="item.controlType == 'DateTime'">
            {{ scope.row[firstLower(item.fieldName)] | formatDate }}
          </template>
          <template v-else>
            {{ scope.row[firstLower(item.fieldName)] }}
          </template>
        </template>
      </el-table-column>
複製代碼

2.11 分頁組件也能夠按照配置進行顯示。

<el-pagination v-if="templateModel.model.listShowPage == 1" background layout="total, sizes, prev, pager, next, jumper" :page-sizes="[10, 20, 50, 100, 500]" :page-size="listQuery.limit" :total="total" @size-change="changeSize" @current-change="fetchPage" @prev-click="fetchPrev" @next-click="fetchNext" />
複製代碼

2.12 遺留的問題之一列名資源化

列名資源化是個問題，由於若是讓前端不介入的話，那資源化的工做須要徹底放在後端，定義好資源文件後，前端經過接口獲取資源並自動合併到資源化詞典內。

2.13 遺留的問題之二，按鈕自定義

增刪改查能夠按照通用的定義一套，若是須要擴展新的按鈕，那麼以前設計的模型須要增長按鈕元數據，這塊尚在設計中，有時間再分享。

3.小結

列表的自定義大體功能基本已經實現了，經過這幾回的介紹，你有沒有學會呢？

在低代碼項目設計中，列表自定義設計和表單自定義設計通常是繞不過的檻，若是你有更好的想法，能夠留言。

解放前端工程師——手把手教你開發本身的自定義列表和自定義表單系列之三表格

前言