基于el-table的单元格合并以及行内编辑事件---粗制

<template>
  <div>
    <el-table
      :data="tableData6"
      highlight-current-row
      :span-method="arraySpanMethod"
      :row-style="rowStyle"
      border
      @cell-mouse-enter="handleMouseEnter"
      @cell-mouse-leave="handleMouseOut"
    >
      <el-table-column
        label="ID"
      >
        <template slot-scope="scope">
          <p>{{ scope.row.id }}</p>
        </template>
      </el-table-column>
      <el-table-column
        label="姓名"
      >
        <template slot-scope="scope">
          <div v-if="tableData6.length-1 !== scope.$index">
            <div v-if="mmap[scope.row.id + '姓名']" style="float: right;">
              <el-button icon="el-icon-delete" circle size="mini" type="danger" @click="handleDelete(scope.row.id, scope.$index)" />
              <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="handleEdit(scope.row)" />
            </div>
            {{ scope.row.isedit }}
            <el-input
              v-if="scope.row.isedit"
              :ref="'slotTreeInput' + scope.row.id"
              v-model="scope.row.name"
              autofocus
              @blur.stop="handleInput(scope.row)"
              @keyup.enter.native="handleInput(scope.row)"
            />
            <span v-if="!scope.row.isedit">{{ scope.row.name }}</span>
          </div>
          <el-dropdown v-if="tableData6.length-1 === scope.$index" @command="handleCommand">
            <span class="el-dropdown-link">
              <i class="el-icon-plus" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus" :command="composeValue('target', scope.row.id, scope.row.name, scope.$index)">黄金糕</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus" :command="composeValue('b', scope.row.id, scope.row.name, scope.$index)">狮子头</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus-outline" :command="composeValue('c', scope.row.id, scope.row.name, scope.$index)">螺蛳粉</el-dropdown-item>
              <el-dropdown-item icon="el-icon-check" :command="composeValue('d', scope.row.id, scope.row.name, scope.$index)">双皮奶</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-check" :command="composeValue('e', scope.row.id, scope.row.name, scope.$index)">蚵仔煎</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column
        label="数值1"
      >
        <template slot-scope="scope">
          <div>
            <span
              v-if="(temp[scope.row.id] === undefined || scope.$index === temp[scope.row.id])&& tableData6.length-1 > scope.$index && scope.row.type==='target'"
              @click="addLine1(scope.row.id, scope.row.name, scope.$index)"
            >
              <i class="el-icon-plus" />
            </span>
            <div v-if="columnmap[scope.row.order+scope.row.id+'数值1'] && !((temp[scope.row.id] === undefined || scope.$index === temp[scope.row.id])&& tableData6.length-1 > scope.$index && scope.row.type==='target')&&tableData6.length-1 !== scope.$index" style="float: right;">
              <el-button icon="el-icon-delete" circle size="mini" type="danger" @click="handleDeleteColumn(scope.row.id, scope.$index)" />
              <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="handleEditColumn(scope.row,scope.column)" />
            </div>
            <el-input
              v-if="allowedit[scope.row.order+scope.column.label]"
              :ref="'slotColumnInput' + scope.row.order + scope.column.label"
              v-model="scope.row.amount1"
              autofocus
              @blur.stop="handleInputColumn(scope.row,scope.column)"
              @keyup.enter.native="handleInputColumn(scope.row,scope.column)"
            />
            <span
              v-if="!allowedit[scope.row.order + scope.column.label] && !((temp[scope.row.id] === undefined || scope.$index === temp[scope.row.id])&& tableData6.length-1 > scope.$index && scope.row.type==='target')&&tableData6.length-1 !== scope.$index"
            >{{ scope.row.amount1 }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="数值2"
      >
        <template slot="header">
          <el-dropdown trigger="click" @commond="handleCommandTitle" size="mini" style="font-size:12px;overflow: unset;color: #909399">
            <span>
              {{ weightTitle }} <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="item in weights"
                :key="item.value"
                :command="item.label">
                {{item.label}}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template slot-scope="scope">
          <div>
            <div v-if="columnmap[scope.row.order+scope.row.id+'数值2'] && !((temp[scope.row.id] === undefined || scope.$index === temp[scope.row.id])&& tableData6.length-1 > scope.$index && scope.row.type==='target')&&tableData6.length-1 !== scope.$index" style="float: right;">
              <el-button icon="el-icon-delete" circle size="mini" type="danger" @click="handleDeleteColumn(scope.row.id, scope.$index)" />
              <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="handleEditColumn(scope.row,scope.column)" />
            </div>
            <el-input
              v-if="allowedit[scope.row.order+scope.column.label]"
              :ref="'slotColumnInput' + scope.row.order + scope.column.label"
              v-model="scope.row.amount2"
              autofocus
              @blur.stop="handleInputColumn(scope.row,scope.column)"
              @keyup.enter.native="handleInputColumn(scope.row,scope.column)"
            />
            <span
              v-if="!allowedit[scope.row.order + scope.column.label] && !((temp[scope.row.id] === undefined || scope.$index === temp[scope.row.id])&& tableData6.length-1 > scope.$index && scope.row.type==='target')&&tableData6.length-1 !== scope.$index"
            >{{ scope.row.amount2 }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="amount3"
        label="数值 3"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData6: [{
        id: 1,
        name: '',
        amount1: '',
        amount2: '',
        amount3: '',
        isedit: false,
        type: '',
        order: 0
      }],
      weights: [
        {
          label: '有权重',
          value: 1
        },
        {
          label: '无权重',
          value: 2
        }
      ],
      weightTitle: '权重',
      mmap: [],
      columnmap: [],
      temp: {},
      spanArr: [], // 一个空的数组，用于存放每一行记录的合并数
      pos: 0, // spanArr 的索引
      contentSpanArr: [],
      position: 0,
      rowStyle: {
        height: 57 + 'px'
      },
      allowedit: {}
    }
  },
  created() {
    console.log(this.allowedit)
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === this.tableData6.length - 1 || row.type !== 'target') {
        if (columnIndex === 1) {
          return [1, 2]
        }
      } else {
        if (columnIndex === 0) {
          if (this.spanArr.length > 0) {
            const _row = this.spanArr[rowIndex]
            if (_row !== undefined) {
              const _col = _row > 0 ? 1 : 0
              return {
                rowspan: _row,
                colspan: _col
              }
            }
          }
        }
        if (rowIndex !== undefined && columnIndex === 1) {
          if (this.contentSpanArr.length > 0) {
            const _row = this.contentSpanArr[rowIndex]
            if (_row !== undefined) {
              const _col = _row > 0 ? 1 : 0
              return {
                rowspan: _row,
                colspan: _col
              }
            }
          }
        }
      }
    },
    addLine1(index, name, _index) { // 添加行
      if (name === undefined || name === '') {
        this.$message({
          type: 'error',
          message: '填写指标的时候指标维度必须先填写'
        })
        return
      }
      this.temp[index] = _index + 1
      for (var obj in this.temp) {
        if (obj > index) {
          this.temp[obj] = this.temp[obj] + 1
        }
      }
      var newValue = {
        id: index,
        name: name,
        amount1: '',
        amount2: '',
        amount3: '',
        isedit: false,
        type: 'target',
        order: 0
      }
      // 添加新的行数
      this.tableData6.push(newValue)
      this.tableData6.sort((a, b) => {
        if (a.id < b.id) {
          return -1
        } else {
          return 1
        }
      })
      // sort排序后 依次将顺序填入order
      this.tableData6.forEach((item, index) => {
        this.tableData6[index].order = index
      })
      this.spanArr = []
      this.contentSpanArr = []
      for (var i = 0; i < this.tableData6.length; i++) {
        if (i === this.tableData6.length - 1) {
          return
        }
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
          this.contentSpanArr.push(1)
          this.position = 0
        } else {
          // 第1列
          if (this.tableData6[i].id === this.tableData6[i - 1].id) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
          // 第二列
          if (this.tableData6[i].name === this.tableData6[i - 1].name && this.tableData6[i].id === this.tableData6[i - 1].id) {
            this.contentSpanArr[this.position] += 1
            this.contentSpanArr.push(0)
          } else {
            this.contentSpanArr.push(1)
            this.position = i
          }
        }
      }
    },
    handleEdit(row) {
      if (!row.isedit) {
        row.isedit = true
      }
      this.$nextTick(() => {
        if (this.$refs['slotTreeInput' + row.id]) {
          this.$refs['slotTreeInput' + row.id].$refs.input.focus()
        }
      })
    },
    handleDelete(rowid, rowIndex) { // 删除rowid === 1 的数据
      // 先删除rowid = 1 countline 是当前行所合并的总行数
      // var countline = this.temp[rowid] === undefined? 1:(this.temp[rowid] + 1) // 先不考虑undefined的情况 如果是为定义的则始终都是1行数
      // 先定义删除起始位置   因为只考虑删除第一行的情况 所以始终都是从0开始   即this.temp[1] 就是删除的结束位置 所以此时删除语句为this.tab.splice(0,this.temp[1])
      var norepeat = new Set()
      var map = new Map()
      this.tableData6.forEach((item, index) => {
        norepeat.add(item.id)
      })
      norepeat.forEach((item, index) => {
        this.tableData6.forEach((itemt, indext) => {
          if (item === itemt.id) {
            if (map.get(itemt.id) === undefined) {
              map.set(item, 1)
            } else {
              map.set(item, map.get(item) + 1)
            }
          }
        })
      })
      const merged = map.get(rowid) // 当前行被合并过了没有 当merged === 1 时 表示没有合并行列
      // 获取删除下标
      var deltag = 0
      norepeat.forEach((item, index) => {
        if (item < rowid) {
          deltag += map.get(item)
        }
      })

      this.tableData6.splice(deltag, merged)

      this.tableData6.forEach((temp, index) => {
        if (temp.id > rowid) {
          this.tableData6[index].id = temp.id - 1
        }
      })
      delete this.temp[rowid]
      for (const key in this.temp) {
        if (key > rowid) {
          this.temp[key - 1] = this.temp[key] - merged
        }
      }
      var maxtempindex = 0
      for (const key in this.temp) {
        if (key > maxtempindex) {
          maxtempindex = key
        }
      }
      if (maxtempindex !== 0) {
        delete this.temp[maxtempindex]
      }
      // sort排序后 依次将顺序填入order
      this.tableData6.forEach((item, index) => {
        this.tableData6[index].order = index
      })
      this.spanArr = []
      this.contentSpanArr = []
      for (var i = 0; i < this.tableData6.length; i++) {
        if (i === this.tableData6.length - 1) {
          return
        }
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
          this.contentSpanArr.push(1)
          this.position = 0
        } else {
          // 第1列
          if (this.tableData6[i].id === this.tableData6[i - 1].id) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
          // 第二列
          if (this.tableData6[i].name === this.tableData6[i - 1].name && this.tableData6[i].id === this.tableData6[i - 1].id) {
            this.contentSpanArr[this.position] += 1
            this.contentSpanArr.push(0)
          } else {
            this.contentSpanArr.push(1)
            this.position = i
          }
        }
      }
    },
    handleInput(row) {
      row.isedit = false
    },
    handleMouseEnter: function(row, column, cell, event) {
      this.$set(this.mmap, row.id + column.label, true)
      this.$set(this.columnmap, row.order + row.id + column.label, true)
      this.$set(this.allowedit, row.order + column.label, false)
    },
    handleMouseOut: function(row, column, cell, event) {
      this.$set(this.mmap, row.id + column.label, false)
      this.$set(this.columnmap, row.order + row.id + column.label, false)
      this.$set(this.allowedit, row.order + column.label, false)
    },
    composeValue(command, rowid, rowname, rowIndex) {
      return {
        command: command,
        rowid: rowid,
        rowname: rowname,
        rowIndex: rowIndex
      }
    },
    handleCommand(command) {
      var newValue = {
        id: command.rowid,
        name: command.rowname,
        amount1: '',
        amount2: '',
        amount3: '',
        isedit: false,
        type: command.command
      }
      // 添加新的行数
      // 用新增行的行号替换原本是新增行功能的行号
      this.tableData6[this.tableData6.length - 1].id = command.rowid + 1
      this.tableData6.push(newValue)
      this.tableData6.sort((a, b) => {
        if (a.id < b.id) {
          return -1
        } else {
          return 1
        }
      })
      // sort排序后 依次将顺序填入order
      this.tableData6.forEach((item, index) => {
        this.tableData6[index].order = index
      })
    },
    handleDeleteColumn(rowid, rowIndex) {
      this.tableData6.splice(rowIndex, 1)

      this.tableData6.sort((a, b) => {
        if (a.id < b.id) {
          return -1
        } else {
          return 1
        }
      })
      // sort排序后 依次将顺序填入order
      this.tableData6.forEach((item, index) => {
        this.tableData6[index].order = index
      })
      // 调整order之后 temp中的对象也需要进行调整
      for (const tempKey in this.temp) {
        if (this.temp[tempKey] > rowIndex) {
          this.temp[tempKey] = this.temp[tempKey] - 1
        }
      }
      this.spanArr = []
      this.contentSpanArr = []
      for (var i = 0; i < this.tableData6.length; i++) {
        if (i === this.tableData6.length - 1) {
          return
        }
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
          this.contentSpanArr.push(1)
          this.position = 0
        } else {
          // 第1列
          if (this.tableData6[i].id === this.tableData6[i - 1].id) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
          // 第二列
          if (this.tableData6[i].name === this.tableData6[i - 1].name && this.tableData6[i].id === this.tableData6[i - 1].id) {
            this.contentSpanArr[this.position] += 1
            this.contentSpanArr.push(0)
          } else {
            this.contentSpanArr.push(1)
            this.position = i
          }
        }
      }
    },
    handleEditColumn(row, column) {
      this.allowedit[row.order + column.label] = true
      console.log(this.allowedit)
      this.$nextTick(() => {
        if (this.$refs['slotColumnInput' + row.order + column.label]) {
          this.$refs['slotColumnInput' + row.order + column.label].$refs.input.focus()
        }
      })
    },
    handleInputColumn(row, column) {
      this.allowedit[row.order + column.label] = false
    },
    handleCommandTitle(commond) {
      this.weightTitle = commond
      console.log(commond)
      console.log(this.weightTitle)
    }
  }
}
</script>