el-table multi-scenario requirements processing in element
Participating in web-side projects is inseparable from the operation of the form. In fact, element itself has some problems, and the form is the most commonly used component. If the requirements are more complicated, we will inevitably have some strange problems in the form while we are completing the requirements. Next Let's look at a picture:
1. el-table double header
The header in the picture above is a double header, how should we write that header? We just need to wrap it with an 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>
In this way, our double header is completed, but then the first problem arises. Let’s pay attention to the first picture. The text in the first line of the double header is gray. It is also possible that the color of the header is not fixed, not the table. The style that the header text should have, let's solve the first problem first:
2. el-table modify the header background color and header text color uniform
//我们只需要在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>
Then we often meet the needs of merging cells, and show you the application scenario:
we can see that the first row and the seventh row are exclusive to one row, so how do we do this?
3. el-table merged cells
//我们只需要在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 operates the style of a certain cell alone
When we want to give a cell a separate class name to change the style or dynamically manipulate the style of a cell according to the value in a cell, we need a special attribute cell-class-name, property value is a method
<el-table :data="tableData" style="width:100%;" max-height="570px" size="small" :cell-class-name="cellcolor" >
</el-table>
Write the method you named in 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. The front end of the el-table table has no data matching "–"
Next, we have another scenario. When there is no data at present, we need to match the data to '–'. If the number of columns is not many, we can solve it by writing a trigram. If there are many columns, what do we need to do? ?
//当我们接口拿到数据后
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. The el-table table is sorted according to the value of a certain column, and the small arrow events are sorted
The sorting of tables in our development, the logic is generally in the backend. The frontend only needs to pass the parameters to the backend to complete the sorting. What do we need to do in the frontend? Give a default sorting attribute default-sort and a sorting click event @sort-change, then add sortable to the columns participating in the dynamic sorting, as shown in the figure below,
and then the event logic of our sorting small arrows
sortChangefirst(column){
//事件会默认传入这一列的数据，我们处理好参数逻辑，并且重新调用接口获取数据就好
this.curfactor = column.prop;
this.cursort = column.order === 'ascending' ? 'asc' : 'desc';
this.getsiterank()
},