vue element ui_项目中常用的vue代码总结（element-ui中的table组件修改单元格样式）...

背景

项目中已经封装好的table单元格的样式都是居中text-align：center；需求变更为某个table中单元格内是大段的文字，且需要保留空白符序列，正常地进行换行

分析

需求1：其他的table不变，该table的单元格单独设置样式；

需求2：单元格内文字保留空白符序列，正常地进行换行

解决

查看element-ui官网的table组件的属性

单元格的cell-class-name的属性可以设置唯一的className，修改该className的样式就可以啦。

单元格内文字保留空白符序列，正常地进行换行的需求可以使用css属性：

white-space 属性

设置为pre-wrap即可，靠右显示：text-align：left

代码

//el-table   templete
:cell-style="cellStyle"

//js
cellStyle (row, column, rowIndex, columnIndex) {
      return "information-cell"
},


//css
.information-cell {
  text-align: left ;
  .cell {
    white-space: pre-wrap;
  }
}

总结

遇到相关组件的问题找文档就OK了