zoukankan      html  css  js  c++  java
  • element中合并单元格操作

    vue中使用element合并表格的行或者列

    <template>
      <div>
        <el-table
          :data="tableData"
          :span-method="arraySpanMethod"
          border
          style=" 100%">
          <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"
            sortable
            label="数值 1">
          </el-table-column>
          <el-table-column
            prop="amount2"
            sortable
            label="数值 2">
          </el-table-column>
          <el-table-column
            prop="amount3"
            sortable
            label="数值 3">
          </el-table-column>
        </el-table>
    
        <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>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            tableData: [{
              id: '12987122',
              name: '王小虎',
              amount1: '234',
              amount2: '3.2',
              amount3: 10
            }, {
              id: '12987123',
              name: '王小虎',
              amount1: '165',
              amount2: '4.43',
              amount3: 12
            }, {
              id: '12987124',
              name: '王小虎',
              amount1: '324',
              amount2: '1.9',
              amount3: 9
            }, {
              id: '12987125',
              name: '王小虎',
              amount1: '621',
              amount2: '2.2',
              amount3: 17
            }, {
              id: '12987126',
              name: '王小虎',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            },{
              id: '12987126',
              name: '王小虎',
              amount1: '539',
              amount2: '4.1',
              amount3: 15
            }]
          };
        },
        methods: {
          // row当前行数据, column当前列数据, rowIndex行号, columnIndex列号
          arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (rowIndex % 2 === 0) {
              if (columnIndex === 0) {
                // 从第0列开始合并三列为一格
                return [1, 3];
              } else if (columnIndex === 1||columnIndex === 2) {
                // 清除第1和第2列
                return [0, 0];
              }
            }
          },
    
          objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
              if (rowIndex % 3 === 0) {
                // 从偶数行开始合并3行为一格
                return {
                  rowspan: 3,
                  colspan: 1
                };
              } else {
                // 删除%3不为0的行数据
                return {
                  rowspan: 0,
                  colspan: 0
                };
              }
            }
          }
        }
      };
    </script>
  • 相关阅读:
    WinForm事件中的Object sender和EventArgs e参数
    Day 25:Python 模块 collections 3 个常用类
    Day 23:Python 中的一些高频面试题及解答小记
    Day 22:Python 迭代器和生成器小记
    Day 21:Python 多线程和协程
    Day 20:python中几个常用的内置函数
    Day 19:Python 函数五类参数
    遍历容器auto方法
    JS鼠标提示框效果
    数据库(二)
  • 原文地址:https://www.cnblogs.com/Alex-Song/p/13223339.html
Copyright © 2011-2022 走看看