前言阅读前请按照顺序参看系列文章，效果更佳!
Vue将路由到公共组件，并根据路径中是否存在文件动态加载组件
解放前端工程师——，教你开发自己的定制列表和定制表单系列之一
释放前端工程师——，教他们开发自己的自定义列表和自定义表单系列两个界面
据说系列文章很难爆炸。 知识点负担不够，大家以后不想收藏，没关系。 系列文章的好处是容易看到，在碎片化的时间内很快就会读完。
1 .正如1. Common公共页面前面的几节所述，如果需要完成我们的低代码清单设计，必然会导致公共组件的设计。
1.1灵活的动态组件我们设计了公共布局组件以完成通用功能。 当然，它的内容非常少，只是引入了组件组件。
以下内容摘自Vue文档。
在某些情况下，在不同组件之间动态切换非常有用。 例如，在多选项卡界面中，可以通过将特殊is attribute添加到Vue元素来实现上述内容。
！ -组件在` currentTabComponent '更改时更改--component v-bind : is=' currenttabcomponent '/component在上述示例中为current
由于此组件支持多个根，因此vue优化仅调用一次created方法。 因此，需要完成路由切换时的加载工作。
1.2实现尴尬的异步api调用前一节存在一些问题。 由于与api的调用有关，所以这种异步方法在页面更新时不会太慢更新状态，因此需要优化上一节中的组件以确保顺利加载数据。
首先控制显示，在这里引入initCom变量，在未准备好之前不显示组件。 这样有点时间页面空白~~~暂时找不到合适的方案； templatedivclass=' app-container ' keep-alivev-if=' init com ' component 3360 is=' real component ' v-if=' real cononent id'/keep-alive/div/template重新控制api请求，在路由切换前加载列表定义模型数据，并在加载完成后重新更新vuex数据， 加载实际组件befooote的next () next ) VM={VM.guid=VM.getguid ) to ) if ) VM.hasexpire ) VM.UDF， 虚拟机. guid ((const http=new http ) ) http.fetch ) ) URL : `/tools/getmodeldefine/$ (虚拟机. guid )，method : } . { guid: vm.guid， data } ) VM.init(to ) } init(route ) constpath=route.pathtry ) this.realcompoonent=require (` @/views $ { path ) this catch(ex ) console.log (loadsubcom ) ${path}failed.${ex} ` ) this.real component=null } this.init com
2.CommonLayout组件如果未定义realCompoonent组件页面，将自动使用CommonLayout组件进行显示。
2.1这张表有点难看，主要是用列表的形式列出我们定义的表，效果如下。
2.2模型元数据主要根据模型定义进行分析和表达。
Common页面组件顺利获得了模型定义数据，并将其放置在vuex中。 因此，本组件只需获取guid参数并在vuex中查询数据。
2.3定义了guid属性。 e
xport 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-columnv-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.小结列表的自定义大致功能基本已经实现了，通过这几次的介绍，你有没有学会呢？
在低代码项目设计中，列表自定义设计和表单自定义设计一般是绕不过的槛，如果你有更好的想法，可以留言。