vue+elementui的table合并行

矫情吗；* 2023-02-20 05:58 12阅读 0赞

![20200623163448549.png][]

一个班级下面可以有多个试卷。这时候我们要根据班级的id来确定合并的行数。班级id一样的要合并。

>   tableData: \[ \{  
>           classname: '2018年暑假班一年级语文小班兴趣',  
>           clsid: '123',  
>           title: '2020/06/18 20:21:12 测试 (4)题',  
>         \}, \{  
>           classname: '2018年暑假班一年级语文小班兴趣',  
>           clsid: '123',  
>           title: '2020/06/18 20:21:12 测试 (4)题',  
>         \}, \{  
>           classname: '2017年暑假班一年级语文小班兴趣',  
>           clsid: '1234',  
>           title: ' 语文期末试卷',  
>         \}, \{  
>           classname: '2019年暑假班一年级语文小班兴趣',  
>           clsid: '12345',  
>           title: '测试卷',  
>         \}\],

从上面的数据我们可以看出第一行和第二行都是2018年暑假班一年级语文小班兴趣的要合并。

这里我们可以给每个数据增加一个属性.代表当前行和列合并的数。然后在循环表格的时候可以参照这个值来。

clsid-span=\{

rowspan:'',

colspan:''

下面这个函数data代表table表格。merge代表要根据那些字段合并。merge是个数组可以有多个要合并的参数。

> mergeTableRow(data, merge) \{  
>   if (!merge || merge.length === 0) \{  
>     return data  
>   \}  
>   merge.forEach((m) => \{  
>     const mList = \{\}  
>     data = data.map((v, index) => \{  
>       const rowVal = v\[m\]  
>       if (mList\[rowVal\] && mList\[rowVal\].newIndex === index) \{  
>         mList\[rowVal\]\['num'\]++  
>         mList\[rowVal\]\['newIndex'\]++  
>         data\[mList\[rowVal\]\['index'\]\]\[m + '-span'\].rowspan++  
>         v\[m + '-span'\] = \{  
>           rowspan: 0,  
>           colspan: 0  
>         \}  
>       \} else \{  
>         mList\[rowVal\] = \{ num: 1, index: index, newIndex: index + 1 \}  
>         v\[m + '-span'\] = \{  
>           rowspan: 1,  
>           colspan: 1  
>         \}  
>       \}  
>       return v  
>     \})  
>   \})  
>   return data  
> \}

我们要合并的是根据clsid来的。所以我们在mounted的时候要调用他.

> mounted() \{
> 
>    this.table=this.mergeTableRow(this.table,\['classname','clsid'\]);
> 
> \}

根据上面的调用我们可以看到this.table现在的值是。这样的。知道了每行的数据的合并的行和列。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70][]

> <el-table :data="Lessontable"   :span-method="arraySpanMethod">
> 
>             <el-table-column prop="classname" label="班级名称">
> 
>             </el-table-column>
> 
>             <el-table-column prop="title" label="试卷" width="260px">
> 
>             </el-table-column>
> 
> </el-table>

我们根据他的classname-span和clsid-span就可以知道合并的行列数。

> arraySpanMethod(\{ row, column, rowIndex, columnIndex \}) \{
> 
>                 const span = column\['property'\] + '-span'
> 
>                     if(row\[span\])\{
> 
>                         return row\[span\]
> 
>                     \}
> 
>             \},

[20200623163448549.png]: https://img-blog.csdnimg.cn/20200623163448549.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200623165646711.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNzY5OTE0,size_16,color_FFFFFF,t_70