el-table动态合并

最新推荐文章于 2024-03-15 17:27:37 发布

mmmmmmmmzw

最新推荐文章于 2024-03-15 17:27:37 发布

阅读量553

点赞数

分类专栏：随笔文章标签： vue js

本文链接：https://blog.csdn.net/mmmmmmmmzw/article/details/124584057

版权

随笔专栏收录该内容

10 篇文章 0 订阅

订阅专栏

实例

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>表格合并</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  
</head>
<body>
  <div id="app">
    <template>
      <div>
        <h5>列合并</h5>
  <table border="1">
    <tr>
      <td colspan="2">1</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
    </tr>
  </table>
  <h5>行合并</h5>
  <table border="1">
    <tr>
      <td rowspan="2">1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
      <td>6</td>
    </tr>
  </table>
  <h5>假动态列合并</h5>
  <table border="1">
    <tr v-for="index in 3" :key="index">
      <template v-for="item in 2">
        <td :key="item" v-if="colspanMerge[index-1][item-1]" :colspan="colspanMerge[index-1][item-1]">{{index}}-{{item}}</td>
      </template>
    </tr>
  </table>
  <h5>假动态行合并</h5>
  <table border="1">
    <tr v-for="index in 3" :key="index">
      <template v-for="item in 2">
        <td  :key="item" v-if="rowspanMerge[index-1][item-1]" :rowspan="rowspanMerge[index-1][item-1]">{{index}}-{{item}}</td>
      </template>
    </tr>
  </table>
  <h5>动态合并</h5>
  <el-table :data="data" :span-method="arraySpanMethod" border>
    <el-table-column align="center" type="index"></el-table-column>  
    <el-table-column label="姓名" align="center" prop="name"></el-table-column>  
    <el-table-column label="购买物品" align="center" prop="wp"></el-table-column>  
    <el-table-column label="金额" align="center" prop="amount"></el-table-column>  
  </el-table>
      </div>
    </template>
  </div>
</body>
<script>
const vm = new Vue({
  el: '#app',
  data() {
    return {
      rowspanMerge: [[2,1],[0,1],[1,1]],
      colspanMerge: [[2,0],[1,1],[1,1]],
      spanArr: [],
      pos: 0,
      data: [
        {
          name: '王三',
          wp: '牙刷',
          amount: 10
        },
        {
          name: '王三',
          wp: '牙膏',
          amount: 22
        },
        {
          name: '叶红',
          wp: '毛巾',
          amount: 30
        },
        {
          name: '赵四',
          wp: '可乐',
          amount: 2.5
        },
        {
          name: '赵四',
          wp: '鸭脖',
          amount: 50
        }
      ]
    }
  },
  created() {
    this.getSpanArr()
  },
  methods: {
    // 合并
    getSpanArr() {
      this.spanArr = []
      for (let i = 0; i < this.data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else if (this.data[i].name === this.data[i - 1].name) {
          this.spanArr[this.pos] += 1
          this.spanArr.push(0)
        } else {
          this.spanArr.push(1)
          this.pos = i
        }
      }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex<2) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    }
  }
})
</script>
</html>

mmmmmmmmzw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
el-table动态合并

实例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格合并
复制链接

扫一扫