vue 原生js 二维数组表格单元格行和列数据合并。

最新推荐文章于 2024-05-04 02:42:40 发布

wenlong_15

最新推荐文章于 2024-05-04 02:42:40 发布

阅读量773

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 前端开发文章标签： javascript vue.js html es6

本文链接：https://blog.youkuaiyun.com/wenlong_15/article/details/115332574

前端开发同时被 2 个专栏收录

7 篇文章

订阅专栏

javascript

2 篇文章

订阅专栏

该博客详细介绍了如何在 Vue.js 中实现表格的行和列合并。通过提供的代码示例，展示了如何处理数据并使用 `colspan` 和 `rowspan` 属性来合并单元格，从而创建具有复杂布局的表格。主要涉及前端开发中的 HTML、CSS 和 JavaScript 技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
  <div>
      <table class="help-table">
        <tr v-for="(itemTr, indexTr) in tableData" :key="indexTr">
          <td
            :colspan="itemTd.colspan"
            :rowspan="itemTd.rowspan"
            v-for="(itemTd, indexTd) in itemTr"
            :key="indexTd"
          >
            {{ itemTd.name }}
          </td>
        </tr>
      </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
            ["周一","周一","周一","周三"],
            ["语文","数学","英语","体育"],
            ["语文","英语","数学","体育"]
        ],
    };
  },
  created() {
        //单元格行和列合并
        this.tableData = this.colspanData(this.tableData);
    },
  computed: {},
  watch: {

  },
  methods: {

    //合并行和列
    colspanData(data) {
      //合并行
      let colspanData = [];
      for (let i = 0; i < data.length; i++) {
        let rowsArray = [];
        second: for (let j = 0; j < data[i].length; j++) {
          let obj = {
            name: data[i][j],
            colspan: 1, //列
            rowspan: 1, //行
          };
          if (rowsArray.length > 0) {
            for (let k = 0; k < rowsArray.length; k++) {
              if (data[i][j] === rowsArray[k].name) {
                rowsArray[k].colspan++;
                continue second;
              }
            }
          }
          rowsArray.push(obj);
        }
        colspanData.push(rowsArray);
      }
      //合并列
      return this.rowspanData(colspanData);
    },

    //合并列
    rowspanData(data) {
      for (let i = data.length; i > 0; i--) {
        if (data[i - 2]) {
          if (data[i - 1].length === data[i - 2].length) {
            for (let j = data[i - 1].length; j > 0; j--) {
              if (typeof data[i - 1][j - 1].name != "number") {
                if (data[i - 1][j - 1].name === data[i - 2][j - 1].name) {
                  //如果与上一个元素相同，上一个元素的rowspan+当前的rowspan值
                  data[i - 2][j - 1].rowspan += data[i - 1][j - 1].rowspan;
                  //如果与上一个元素相同，删除当前元素
                  data[i - 1].splice(j - 1, 1);
                }
              }
            }
          }
        }
      }
      return data;
    },
  },
};
</script>
<style lang="scss" scoped>
.help-table {
  width: 100%;
  border: 1px solid #ddd;
  background: #f6f6f6;
  line-height: 2em;
  border-collapse: collapse;
  padding: 0;
  th,
  td {
    text-align: center;
    border-right: 1px solid #ddd;
  }
  td {
    border-top: 1px solid #ddd;
  }
  th.end,
  td.end {
    border-right: 0;
  }
  .selectable {
    background: #fff;
  }
}
.description {
  padding: 10px 0;
}
</style>