最近，项目中有很多表格。对于元素表的使用，您只需要传入数据，然后编写头来呈现。

然而，在实际应用中，如果头被死写，每个组件都写自己的表，不仅浪费时间，还会消耗性能。此时，您需要动态呈现标题。

官方的例子是写死标题，所以为了满足项目的需要，只能自己研究。

1.自定义标题

代码如下。其实分为两部分。表主数据在TableData对象中，头数据保存在header data中。海德达。标签实际上是标题值。如果标题是“序列号”，则为Headerdata。标签='序列号'。通过在TableData中构建类似TableData[序列号]=1的地图对象，您可以动态呈现所需的表格。

El-table : data=' table data ' : height=' table height ' : row-class-name=' showemergenceline '边框元素-加载-微调器=' El-icon-loading ' eleme-Nt-loading-text='拼命加载' @ selection-change=' handleselectionchange ' v-loading . lock=' table loading ' @ header-drawind=' El-table-column v-f或=' header datas ' : prop中的header

在项目中，有些表经常有如下要求，一行合并下几行，那么如何处理呢

官方文件中有这个方法

您可以通过将span-method传递给表来合并行或列。方法的参数是一个对象，它包含四个属性：当前行、当前列、当前行号rowIndex和当前列号columnIndex。该函数可以返回包含两个元素的数组，第一个元素代表rowspan，第二个元素代表colspan。您还可以返回一个关键字名称为rowspan和colspan的对象。

El-table : data=' table data ' : span-method=' objectSpanMethod ' highlight-current-row element-loading-spinner=' El-icon-loading ' element-loading-text='拼命加载' v-loading.lock='可维护加载'边框样式=' width : 100%；margin-top : 25px '/El-table arraysammethod({ row，columnindex，column index }){ if(row index % 2===0){//偶数行if (columnIndex===0) {//第一列返回[1，2]；//1合并一行，2占用两行}否则如果(columnIndex===1) {//第二列返回[0，0]；//0合并0行，0占0行}}}，objectspanmethod ({row，column，rowindex，column index }){ if(row index===0){ if(row index % 2===0){ return { row span : 2，//合并行数colspan:} else { return { rowspan: 0，colspan : 0 }；}}}在这里，我们可以根据自己的需求对rowIndex和columnIndex做一些条件判断，然后返回到rowspan，colspan可以合并。

摘要

以上是边肖介绍的vue elementUI表的表头和行组合的示例代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你的！