zoukankan      html  css  js  c++  java
  • Element跨行表格

    html

    <el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          border
          style=" 100%; margin-top: 20px">
          <el-table-column
            prop="id"
            label="ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名">
          </el-table-column>
          <el-table-column
            prop="amount1"
            label="数值 1(元)">
          </el-table-column>
          <el-table-column
            prop="amount2"
            label="数值 2(元)">
          </el-table-column>
          <el-table-column
            prop="amount3"
            label="数值 3(元)">
          </el-table-column>
          <el-table-column
            prop="amount4"
            label="数值 4(元)">
          </el-table-column>
          <el-table-column>
            <el-button>默认按钮</el-button>
          </el-table-column>
        </el-table>

    data

    {
              id: '12987122',
              name: '王小虎',
              amount1: '234',
              amount2: '3.2',
              amount3: 10,
              amount4: 10
            },
            {
              amount1: '234',
              amount2: '3.2',
              amount3: 10,
              amount4: 10
            },
            {
              amount1: '234',
              amount2: '3.2',
              amount3: 10,
              amount4: 10
            },
            {
              amount1: '234',
              amount2: '3.2',
              amount3: 10,
              amount4: 10
            },
            {
              amount1: '234',
              amount2: '3.2',
              amount3: 10,
              amount4: 10
            }

    methods

    objectSpanMethod ({row, column, rowIndex, columnIndex}) {
          if (columnIndex === 0) {
            if (rowIndex % 5 === 0) {
              return {
                rowspan: 5,
                colspan: 1
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }
          if (columnIndex === 1) {
            if (rowIndex % 5 === 0) {
              return {
                rowspan: 5,
                colspan: 1
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }
          if (columnIndex === 6) {
            if (rowIndex % 5 === 0) {
              return {
                rowspan: 5,
                colspan: 1
              }
            } else {
              return {
                rowspan: 0,
                colspan: 0
              }
            }
          }
        },

    表头错位修复

    .table-data >>> .gutter
    display: table-cell !important

  • 相关阅读:
    log4net 无法输出日志,跟踪发现IsErrorEnabled等,都是Flase
    jquery load加载不了内容
    数据库中的表还是一定要建索引
    最近的项目中用到读卡器,用的华视身份证阅读器,附上SDK使用手册
    背景自动滚动
    理解JavaScript函数(函数和对象的区别和联系)
    代码运行框
    ie8以ie7方式解析
    js开发工具集
    cssZip
  • 原文地址:https://www.cnblogs.com/ronle/p/11093814.html
Copyright © 2011-2022 走看看