<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>
基于el-table的单元格合并以及行内编辑事件---粗制
最新推荐文章于 2024-07-04 19:32:13 发布