elementui table 合并行的同时动态隐藏行

最新推荐文章于 2024-08-10 03:15:04 发布

strong90

最新推荐文章于 2024-08-10 03:15:04 发布

阅读量3.1k

点赞数

分类专栏： vue 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/strong90/article/details/122844111

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这篇博客介绍了一种使用Vue.js处理表格数据的方法，通过点击姓名来控制显示下几行的数据，并实现了相同数据的合并。文章详细展示了如何通过`el-table`组件结合`span-method`属性实现行合并，以及利用`row-class-name`控制行的显示隐藏。代码中涉及到数据处理、事件监听以及表格列的合并逻辑，为表格展示提供了灵活的解决方案。

摘要由CSDN通过智能技术生成

有个需求，点一行控制显示下几行的数据，且相同数据需要合并，实现是实现了，但是总感觉有点笨，记录下

<template>
  <div class="home">
    <el-table
      :data="tableData"
      :span-method="objectSpanMethod"
      border
      style="width: 100%; margin-top: 20px"
      :row-class-name="tableRowClassName"
    >
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <div @click="nameClick(scope.row, scope.$index)">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </div>
        </template>
      </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="数值 3元"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data() {
    return {
      tableData: [
        {
          id: "1",
          name: "王小虎",
          amount1: "111",
          amount2: "3.2",
          amount3: 10,
          amount4: 10,
        },
        {
          id: "2",
          name: "王小虎",
          amount1: "111",
          amount2: "4.43",
          amount3: 10,
          amount4: 10,
        },
        {
          id: "3",
          name: "王小虎",
          amount1: "324",
          amount2: "1.9",
          amount3: 12,
          amount4: 10,
        },
        {
          parentName: "王小虎",
          id: 1,
          name: "小龙",
          amount1: "529",
          amount2: "222",
          amount3: 15,
          amount4: 10,
          isHide: true
        },
        {
          parentName: "王小虎",
          id: "2",
          name: "小小龙",
          amount1: "52",
          amount2: "222",
          amount3: 1,
          amount4: 10,
          isHide: true
        },
        {
          parentName: "王小虎",
          id: "3",
          name: "小小龙",
          amount1: "539",
          amount2: "222",
          amount3: 1,
          amount4: 2,
          isHide: true
        },
        {
          parentName: "王小虎",
          id: "4",
          name: "小小龙",
          amount1: "539",
          amount2: "222",
          amount3: 12,
          amount4: 10,
          isHide: true
        },
        {
          parentName: "王小虎",
          id: "5",
          name: "小龙龙",
          amount1: "539",
          amount2: "222",
          amount3: 15,
          amount4: 10,
          isHide: true
        },
        {
          id: "4",
          name: "大龙",
          amount1: "621",
          amount2: "222",
          amount3: 17,
          amount4: 10,
        },
        {
          id: "5",
          name: "大龙",
          amount1: "539",
          amount2: "222",
          amount3: 15,
          amount4: 10,
        },
        {
          id: "6",
          name: "小龙",
          amount1: "539",
          amount2: "222",
          amount3: 15,
          amount4: 10,
        }
      ],
      arr1: [],
      index1: 0,
      arr2: [],
      index2: 0,
      arr3: [],
      index3: 0,
      arr4: [],
      index4: 0,
    };
  },
  mounted() {
    this.mergeData();
  },
  methods: {
    // 隐藏有parentid的子项目
    tableRowClassName(row, index) {
      if (row.row.isHide) {
          return 'hidden-row'
        }
        return ''
    },

    // 姓名点击方法
    nameClick(data, index) {
      console.log('data = ', data, 'index = ', index)
      for (let i = 0; i < this.tableData.length; i++) {
        if (this.tableData[i].parentName && data.name == this.tableData[i].parentName) {
          this.tableData[i].isHide = !this.tableData[i].isHide
        }
      }
      console.log('table =', this.tableData)
    },
    initSpanData() {
      this.arr1 = [];
      this.index1 = 0;
      this.arr2 = [];
      this.index2 = 0;
      this.arr3 = [];
      this.index3 = 0;
      this.arr4 = [];
      this.index4 = 0;
      this.arr5 = [];
      this.index5 = 0;
    },
    mergeData() {
      this.initSpanData();
      for (let i = 0; i < this.tableData.length; i++) {
        if (i == 0) {
          // 第一行
          this.arr1.push(1);
          this.index1 = 0;
          this.arr2.push(1);
          this.index2 = 0;
          this.arr3.push(1);
          this.index3 = 0;
          this.arr4.push(1);
          this.index4 = 0;
          this.arr5.push(1);
          this.index5 = 0;
        } else {
          // 第一列
          if (this.tableData[i].name == this.tableData[i - 1].name) {
            this.arr1[this.index1]++;
            this.arr1.push(0);
          } else {
            this.arr1.push(1);
            this.index1 = i;
          }

          // 第二列
          if (
            this.tableData[i].amount1 == this.tableData[i - 1].amount1 &&
            this.tableData[i].name == this.tableData[i - 1].name
          ) {
            this.arr2[this.index2]++;
            this.arr2.push(0);
          } else {
            this.arr2.push(1);
            this.index2 = i;
          }

          // 第三列
          if (
            this.tableData[i].amount2 == this.tableData[i - 1].amount2 &&
            this.tableData[i].name == this.tableData[i - 1].name
          ) {
            this.arr3[this.index3]++;
            this.arr3.push(0);
          } else {
            this.arr3.push(1);
            this.index3 = i;
          }

          // 第四列
          if (
            this.tableData[i].amount3 == this.tableData[i - 1].amount3 &&
            this.tableData[i].name == this.tableData[i - 1].name
          ) {
            this.arr4[this.index4]++;
            this.arr4.push(0);
          } else {
            this.arr4.push(1);
            this.index4 = i;
          }

          // 第五列
          if (
            this.tableData[i].amount4 == this.tableData[i - 1].amount4 &&
            this.tableData[i].name == this.tableData[i - 1].name
          ) {
            this.arr5[this.index5]++;
            this.arr5.push(0);
          } else {
            this.arr5.push(1);
            this.index5 = i;
          }
        }
      }

      // 这些数组的意思
      // 比如 arr1 = [3, 0, 0, 2, 0]
      // 代表第一行向下合并3个，第二行 0 代表消失，第三行 0 消失，第四行向下合并2个，第五行 0 消失，以此类推
      // console.log(this.arr1, "----", this.index1);
      // console.log(this.arr2, "----", this.index2);
      // console.log(this.arr3, "----", this.index3);
      // console.log(this.arr4, "----", this.index4);
      // console.log(this.arr5, "----", this.index5);
    },

    // 自带合并的方法
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        let row1 = this.arr1[rowIndex];
        return {
          rowspan: row1,
          colspan: 1,
        };
      } else if (columnIndex == 1) {
        let row2 = this.arr2[rowIndex];
        return {
          rowspan: row2,
          colspan: 1,
        };
      } else if (columnIndex == 2) {
        let row3 = this.arr3[rowIndex];
        return {
          rowspan: row3,
          colspan: 1,
        };
      } else if (columnIndex == 3) {
        let row4 = this.arr4[rowIndex];
        return {
          rowspan: row4,
          colspan: 1,
        };
      } else if (columnIndex == 4) {
        let row5 = this.arr5[rowIndex];
        return {
          rowspan: row5,
          colspan: 1,
        };
      }
    },
  },
};
</script>

<style>
  .el-table .hidden-row {
    display: none;
  }
</style>