el-table实现动态表头，自定义斑马纹等功能

需求：1.根据选择的日期时间，实现表头的动态显示功能

           2.修改默认表头灰色样式，

           3.斑马纹偶数灰色改为奇数为灰色

           4.表格某一行加分割线区分

1.效果

 2.动态表格实现

1.height：表格的高度设置，内容超出后会显示滚动条，高度固定

2.:row-class-name：行类名，用作设置斑马纹

这俩个就是时间了一个开始一个结束时间，在表头显示

  

                            {{ startdata }}
                        
                        

                            {{ enddata }}
                        

1.type="datetimerange"：表示是时间日期选择器

2.:picker-options="pickerOptions"，给选择器加上个快捷的日期选项，最近一周，最近一个月，最近三个月

3.    value-format="yyyy-MM-dd HH:mm:ss"，选择好后自动把时间和日期改为"yyyy-MM-dd HH:mm:ss这种格式

斑马纹根据行的index来选择奇数或者偶数的类名是什么

       setRowClassName({ rowIndex }) {
            return rowIndex % 2 === 0 ? 'even-row' : 'odd-row';
        },

3.完整代码

文章到此结束，希望对你有所帮助~