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

  • 相关阅读:
    排序算法---堆排序

    排序算法---希尔排序
    简单排序算法
    Jave 垃圾回收查看工具--jstat
    Linux 查看进程IO状态
    vittualenv 和mkvirtualenv
    服务器被当作了肉机去挖矿的解决办法
    pycharm的函数注释 和 父子组件传递
    git初始化操作
  • 原文地址:https://www.cnblogs.com/yoona-lin/p/13439334.html
Copyright © 2011-2022 走看看