当前位置:   article > 正文

vue修改el-table的样式,标题,列文字位置,颜色,流体高度,气泡_el-table-column 样式

el-table-column 样式

  1. <template>
  2. <div class="test1-container">
  3. <el-table :data="tableData" style="width:550px;margin:0 auto;margin-top:30px;" border :row-style="tableRowStyle"
  4. :header-cell-style="tableHeaderColor" :height="tableHeight">
  5. <el-table-column prop="date" label="日期(居右)" width="180" align="right" header-align="center">
  6. </el-table-column>
  7. <el-table-column prop="name" label="姓名(居中)" width="180" align="center" header-align="center">
  8. </el-table-column>
  9. <el-table-column prop="address" label="地址(居左)" width="180" align="left" header-align="center" show-overflow-tooltip >
  10. </el-table-column>
  11. </el-table>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. name:'test1',
  17. data() {
  18. return {
  19. tableHeight:'',
  20. tableData: [
  21. {
  22. date: '2016-05-02',
  23. name: '王小虎',
  24. address: '上海市普陀区金沙江路 1518 弄'
  25. },
  26. {
  27. date: '2016-05-04',
  28. name: '王小虎',
  29. address: '上海市普陀区金沙江路 1517 弄'
  30. },
  31. {
  32. date: '2016-05-01',
  33. name: '王小虎',
  34. address: '上海市普陀区金沙江路 1519 弄'
  35. },
  36. {
  37. date: '2016-05-03',
  38. name: '王小虎',
  39. address: '上海市普陀区金沙江路 1516 弄'
  40. },
  41. {
  42. date: '2016-05-02',
  43. name: '王小虎',
  44. address: '上海市普陀区金沙江路 1518 弄'
  45. },
  46. {
  47. date: '2016-05-04',
  48. name: '王小虎',
  49. address: '上海市普陀区金沙江路 1517 弄'
  50. }
  51. ],
  52. }
  53. },
  54. created(){
  55. this.tableHeight = window.innerHeight-500
  56. },
  57. methods:{
  58. // 修改table tr行的背景色
  59. tableRowStyle({ row, rowIndex }) {
  60. return 'background-color: #F7F6Fd'
  61. },
  62. // 修改table header的背景色
  63. tableHeaderColor({ row, column, rowIndex, columnIndex }) {
  64. if (rowIndex === 0) {
  65. return 'background-color: lightblue;color: #fff;font-weight: 500;'
  66. }
  67. }
  68. }
  69. }
  70. </script>
  71. <style lang="scss" scoped>
  72. .test1-container{
  73. }
  74. </style>

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小惠珠哦/article/detail/810691
推荐阅读