vue修改element-ui table样式更改

来源:网络 文章列表 2020-09-09 8
element UI里面表格的行高需要自己调整高度和设置padding,直接写style是不行的,里面有 :row-style (行的 style)  header-row-styl   (表头行的 style)cell-style(单元格的 style)

element UI里面表格的行高需要自己调整高度和设置padding,直接写style是不行的,里面有 :

1、row-style (行的 style)    

2、header-row-styl   (表头行的 style)

3、cell-style(单元格的 style)

<el-table  border  :span="24" :row-style="{height:'32px'}"  :header-row-style="{height:'32px'}"  :cell-style="{padding:'1px'}">
  <el-table-column></el-table-column>
  <el-table-column></el-table-column>
</el-table>

也可以高度定制表格的样式,比如

<template>
<el-table
   :cell-style="getTdStyle"
   :data="tableData"
   ref="tableData"
   border
   style="width: 100%;"
    max-height="555"
>
....
</el-table>
</template>

<script>
export default {
  methods: {
    getTdStyle(row) {
      // console.log("row", row);
      let style = {};
      // 单独设置表格第三行的样式
      if (row.rowIndex == 2) {
        style = {
          backgroundColor: "#f5f7fa",
          color: "#606266",
        };
      }
      return style;
    }
  }
}
</script>

 

版权声明

本站部分原创文章,部分文章整理自网络。如有转载的文章侵犯了您的版权,请联系站长删除处理。如果您有优质文章,欢迎发稿给我们!联系站长:
愿本站的内容能为您的学习、工作带来绵薄之力。

评论

  • 随机获取
点击刷新
精彩评论
关闭