element 中 el-table 多场景需求处理

element 中 el-table 多场景需求处理

参与web端项目就离不开表格的操作，其实element本身有一些问题，表格又是最常用的组件，如果需求比较复杂，我们在完成需求的同时，表格难免会有一些奇怪的问题，接下我们看一张图片：

1、el-table双重表头

上面这张图的表头是双重表头，那种表头我们要怎么写呢？我们只需要用一个el-table-column包裹起来

<el-table-column min-width="80" label="气象参数"  align="center">
     <el-table-column prop="windDirection" label="风向" width="80" align="center">
     </el-table-column>
     <el-table-column prop="windSpeed" label="风速" width="80" align="center">
       <template slot-scope="scope">
         <div>{{scope.row.windSpeed}}m/s</div>
       </template>
     </el-table-column>
     <el-table-column prop="temperature" label="温度" width="80" align="center">
       <template slot-scope="scope">
         <div>{{scope.row.temperature}}℃</div>
       </template>
     </el-table-column>
     <el-table-column prop="humidity" label="湿度" width="80" align="center">
       <template slot-scope="scope">
         <div>{{scope.row.humidity}}%</div>
       </template>
     </el-table-column>
     <el-table-column prop="airPressure" label="气压" width="80" align="center">
       <template slot-scope="scope">
         <div>{{scope.row.airPressure}}hpa</div>
       </template>
     </el-table-column>
     <el-table-column prop="rainfall" label="雨量" width="80" align="center">
       <template slot-scope="scope">
         <div>{{scope.row.rainfall}}mm</div>
       </template>
     </el-table-column>
  </el-table-column>   

这样我们双重表头就完成了，但是接下来出现了第一个问题，我们注意看第一图，双重表头第一行里的文字是灰色的，也有可能表头的颜色不固定，不是表头文字该有的样式，那我们先解决第一个问题：

2、el-table修改表头背景颜色和表头文字颜色统一

//我们只需要在el-table标签上加上这行代码 :header-cell-style="{background:'#f0f4ff'}" 就可以改表头颜色了
<el-table :data="tableData"  border style="width: 100%" v-loading="loading" :header-cell-style="{background:'#f0f4ff'}">

<style lang="less" scoped>
//这里是修改表头里文字样式的
/deep/.el-table th >.cell{
    font-weight: bold !important;
    color: #333 !important;
}
</style>

然后我们经常也会到合并单元格的需求，给大家看看应用场景：

我们可以看到第一行和第七行是独占一行的，那这种我们要怎么操作呢？

3、el-table合并单元格

//我们只需要在el-table标签上绑定一个:span-method="arraySpanMethod"，arraySpanMethod是一个函数，需要自己定义
<el-table :data="tableData" :span-method="arraySpanMethod" border style="width: 100%" v-loading="loading" >```

```javascript
//这里我是根据某个字段判断的，如果你的表格是固定第几行合并你可以跟rowIndex和columnIndex，不明白这几个参数的可以打印一下
arraySpanMethod({ row, column, rowIndex, columnIndex }) {
        if(row.countyName === '****' || row.countyName === '****'){
           return [1,10]//这里的1和10代表的rowspan和colspan，纵向和横向合并的数量
        }
    },

4、el-table单独操作某一个单元格的样式

当我们要给某个单元格一个单独的类名来改变样又或者是根据某个单元格里的值来动态操作某个单元格的样式时，我们需要一个特殊的属性cell-class-name，属性值是一个方法

<el-table :data="tableData" style="width:100%;" max-height="570px" size="small" :cell-class-name="cellcolor" >
</el-table>

将你命名的方法写在methods中

 cellcolortwo({row,column, rowIndex, columnIndex}){
     //console.log(row,column);//这里拿到的是行数据和列数据，还有行下标和列下标，
     if(column.label !== '时间'){//这里可以换成你的逻辑代码，根据判断return出去一个类名，就是当前这个单元格的类名
         if(!row[column.property]){
             return ''
         }else{
             return aqiColor.ztAirColorClass(this.smalltype,row[column.property])
         }
     } 
 },

5、el-table表格无数据前端匹配"–"

接下来我们另一种场景，当前没有数据的时候，我们需要将数据匹配为’–‘，如果column的列数不多，我们写个三目就解决了，如果列数多我们需要怎么处理呢？

//当我们接口拿到数据后
if (res.result.list.length > 0) {
    let keylist = Object.keys(res.result.list[0]);
    keylist.forEach(item =>{
        res.result.list.forEach(ite =>{
          if(ite[item] === null || ite[item] === ''){
            ite[item] = '--'
          }
        })
      })
  }
this.tableData = res.result.list;

6、el-table表格根据某一列的值排序，排序小箭头事件

我们开发中表格的排序，逻辑一般都在后端，前端只需要将参数传给后端即可完成排序，那我们前端需要做什么呢，给一个默认排序的属性default-sort和排序的点击事件@sort-change，然后在参与动态排序的列上加上sortable，如下图

然后是我们的排序小箭头的事件逻辑

sortChangefirst(column){//事件会默认传入这一列的数据，我们处理好参数逻辑，并且重新调用接口获取数据就好
      this.curfactor = column.prop;
      this.cursort = column.order === 'ascending' ? 'asc' : 'desc';
      this.getsiterank()    
},