element使用table组件设置样式

传递的样式属性在Table Attributes中可以找到,

image.png

比如说要设置每个单元格的属性,遵循以下步骤:
1、在el-table组件中绑定属性
:cell-class-name="cellStyles"
2、在method中写出该方法,并返回一个字符串,可以通过该字符串找到对应的样式

cellStyles({row, column, rowIndex, columnIndex}){
        if(columnIndex == 3){
          return 'link'
        }else{
          return 'rou'
        }
      }

该函数可以有四个参数,分别代表行数,列数,行中每项的索引,列中每项的索引,上述逻辑的意思是每行中第四个元素设置样式link,其余的设置样式rou
3、在style中写出该样式
其中有几个注意的点:
(1)style标签中不能有scoped,否则表格找不到返回的样式
(2)大部分样式由于element已经设置好了,所以要改动需要在样式后添加!important,否则改动该样式不会产生效果
以下附上代码示例:


                
                
                
                
                

methods: {
      cellStyles({row, column, rowIndex, columnIndex}){
        if(columnIndex == 3){
          return 'link'
        }else{
          return 'rou'
        }
      },
}

4、直接在表格上写样式
示例使用cell-style和header-cell-style

  


你可能感兴趣的:(element使用table组件设置样式)