【elementui表格】自定义带斑马纹样式的表格_el-table中斑马格样式

【elementui表格】隔行变色之自定义带斑马纹样式的表格

场景

比如你想实现elementui表格隔行变色的样式，官方文档里面有介绍stripe属性可以属性，但是如果你想自定义设置这个斑马纹的样式，那你就可以参考如下代码

使用

elementui官方文档里面 stripe 属性的使用如下：

  <el-table
    :data="tableData"
    stripe
    border
    style="width: 100%">
    <el-table-column
      v-for="(column,index) in tableHeader"
      :prop="column['prop']"
      :label="column['label']"
      :width="column['width']">
    </el-table-column>
  </el-table>
1
2
3
4
5
6
7
8
9
10
11
12

data(){
	return{
	 tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
     tableHeader:[
      {
        "label":"日期",
        "prop":"date",
        "width":180
      },
      {
        "label":"姓名",
        "prop":"name",
        "width":180
      },
      {
        "label":"地址",
        "prop":"address",
        "width":''
      },
    ],
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

实现效果

自定义斑马纹样式

去掉 el-table 上的 stripe属性，然后添加上 :row-class-name=“tableRowClassName”

<el-table
    :data="tableData"
    :row-class-name="tableRowClassName"
    border
    style="width: 100%">
    <el-table-column
      v-for="(column,index) in tableHeader"
      :prop="column['prop']"
      :label="column['label']"
      :width="column['width']">
    </el-table-column>
  </el-table>
1
2
3
4
5
6
7
8
9
10
11
12

methods:{
	 tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 1) {
        return 'custom_stripe' //自定义样式的类名
      } else  {
        return ''
      }
    },
}
1
2
3
4
5
6
7
8
9

::v-deep .custom_stripe {
  background-color:#f191f5;
  color:#1f0505;
}
1
2
3
4

自定义斑马纹样式的实现效果

备注：希望能帮到大家，实际使用过程中如有错误，欢迎评论区评论指正！