spfm-market-front/src/components/p-table.vue

<template>
  <div>
    <div style="width: 30%; margin: 15px auto">
      <el-input readonly v-model="dataBody.table.tabName"></el-input>
    </div>
    <table class="dataBody-box">
      <tbody>
        <tr v-for="(item, index) in dataBody.rows" :key="index">
          <td
            @contextmenu="showMenu(index, zindex)"
            class="cell"
            v-for="(row, zindex) in item"
            :key="zindex"
            :rowspan="row.rowSpan"
            :colspan="row.colSpan"
            v-show="row.displayFlag == '0'"
          >
            <div v-show="false">
              {{ (dataBody.rows[index][zindex].colNum = zindex) }}
              {{ (dataBody.rows[index][zindex].rowNum = index) }}
            </div>
            <el-input
              class="table-input"
              v-model="row.cellVal"
              :readonly="!isUpdate"
            ></el-input>
          </td>
        </tr>
      </tbody>
    </table>
    <vue-context-menu
      v-if="isUpdate"
      :contextMenuData="contextMenuData"
      @deleteHang="deleteHang"
      @addHangUp="addHangUp"
    ></vue-context-menu>
  </div>
</template>
<script>
export default {
  props: {
    //table数据源
    dataBody: {
      required: true,
      type: Object,
    },
    isUpdate: {
      required: false,
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      contextMenuData: {
        menuName: "demo",
        //菜单显示的位置
        axis: {
          x: null,
          y: null,
        },
        //菜单选项
        menulists: [
          {
            fnHandler: "deleteHang", //绑定事件
            btnName: "删除行", //菜单名称
          },
          {
            fnHandler: "addHangUp", //绑定事件
            btnName: "插入行", //菜单名称
          },
        ],
      },
      hangIndex: "", // 行索引
      lieIndex: "", // 列索引
    };
  },
  methods: {
    showMenu(index, zindex) {
      this.hangIndex = index;
      this.lieIndex = zindex;
      event.preventDefault();
      var x = event.clientX;
      var y = event.clientY;
      console.log(x, y);
      // Get the current location
      this.contextMenuData.axis = {
        x,
        y,
      };
    },
    // 向上增加行
    addHangUp() {
      let itemArr = [];
      for (let i = 0; i < this.hangIndex; i++) {
        this.dataBody.rows[i].map((item) => {
          if (
            this.hangIndex <= parseInt(item.rowSpan) + i - 1 &&
            parseInt(item.rowSpan) > 1
          ) {
            item.rowSpan = parseInt(item.rowSpan) + 1;
          }
        });
      }
      itemArr = JSON.parse(JSON.stringify(this.dataBody.rows[this.hangIndex]));
      itemArr.map((item) => {
        item.rowSpan = "1";
        item.cellVal = "";
      });
      this.dataBody.rows.splice(this.hangIndex, 0, itemArr);
    },
    // 删除行
    deleteHang() {
      if (
        parseInt(this.dataBody.rows[this.hangIndex][this.lieIndex].rowSpan) > 1
      ) {
        this.$message({
          message: "当前行有合并项不能删除",
          type: "wanrning",
        });
        return;
      }
      let num = 0;
      this.dataBody.rows[this.hangIndex].map((item, index) => {
        if (parseInt(item.rowSpan) > 1) {
          this.dataBody.rows[parseInt(this.hangIndex) + 1][index].displayFlag =
            "0";
          this.dataBody.rows[parseInt(this.hangIndex) + 1][index].rowSpan =
            parseInt(item.rowSpan) - 1;
        } else if (item.displayFlag == "1") {
          for (let i = this.hangIndex; i >= 0; i--) {
            num = 0;
            this.dataBody.rows[i].map((item, zindex) => {
              if (item.displayFlag == "0") {
                num++;
              }
              if (
                parseInt(item.rowSpan) > 1 &&
                zindex == index &&
                this.hangIndex <= parseInt(item.rowSpan) + i - 1
              ) {
                item.rowSpan = parseInt(item.rowSpan) - 1;
              }
            });
            if (num == this.dataBody.rows[i].length) {
              return;
            }
          }
        }
      });
      this.dataBody.rows.splice(this.hangIndex, 1);
    },
  },
  watch: {
    dataBody(val, oldval) {
      console.log(val);
      console.log(oldval);
    },
  },
};
</script>
<style lang="scss" scoped>
.dataBody-box {
  border-collapse: collapse;
}

.dataBody-box {
  td,
  th {
    border: 1px solid black;
  }
}
</style>