zoukankan      html  css  js  c++  java
  • Element ui 自定义表格行样式

    如图:

    代码:

    <div>
              <template>
                <!-- 设置表头与表格样式 :row-class-name="tableRowClassName" :header-cell-style="getRowClass"-->
                <el-table
                  :data="tableData"
                  style=" 100%;"
                  :row-class-name="tableRowClassName"
                  :header-cell-style="getRowClass"
                >
                  <el-table-column prop="amount1" label="序号" width="120"></el-table-column>
                  <el-table-column prop="amount2" label="地区" width="180"></el-table-column>
                  <el-table-column prop="amount3" label="浏览量"></el-table-column>
                  <el-table-column prop="amount4" label="访客数"></el-table-column>
                  <el-table-column prop="amount5" label="商品浏览量"></el-table-column>
                  <el-table-column prop="amount6" label="商品访客数"></el-table-column>
                </el-table>
              </template>
            </div>
    
    <script>
    export default {
      name: '',
      data () {
        return {
         tableData: [{
            amount1: '1',
            amount2: '广东',
            amount3: '342',
            amount4: '12',
            amount5: '124',
            amount6: '34'
          },
          {
            amount1: '1',
            amount2: '广东',
            amount3: '342',
            amount4: '12',
            amount5: '124',
            amount6: '34'
          }]
        }  },
      methods: {
    
        // 为表格行添加样式
        tableRowClassName ({ row, rowIndex }) {
          if ((rowIndex + 1) % 2 === 0) {
            return 'double'  //  基数行对应的类
          } else {
            return 'single'  //  偶数行对应的类
          }
        },
        // 为表格头行添加样式
        getRowClass ({ rowIndex }) {
          if (rowIndex === 0) {
            return 'background:#ebeaef'
          } else {
            return ''
          }
        },
    
      }
    }
    </script>
    
    /*更改表格颜色*/
      .double {
        height: 50px;
        background: #f5f5f5 !important;
      }
      .single {
        height: 50px;
        background: #ffffff !important;
      }

    更多参考:https://www.huanggr.cn/1654.html

  • 相关阅读:
    JS数组分页
    UI框架
    mongodb
    koa2 router中间件的三种写法
    Float浮点数转二进制串和十六进制串
    Iterator和for...of循环
    mysql相关故障
    lsof
    iostat测试磁盘性能
    dd测试磁盘
  • 原文地址:https://www.cnblogs.com/yoona-lin/p/13439334.html
Copyright © 2011-2022 走看看