文章目录
- 主要内容
- 表格效果
- 表格代码
- 数据格式需要
- 表格数据格式
- 右键菜单数据格式
- 实现方法
- 表格右键点击菜单事件
- 表格单击事件
- 动态添加行、列
- 表格每行单击事件
- 行合并事件
- 引用
- 代码
主要内容
项目使用vue+element-UI实现
基础表格 element-ui官网查看。项目基于基础表格扩展了动态添加行、列。表头、行内数据动态编辑、选择、修改。还涉及到了动态添加行时，行动态合并。其中还运用到了 v-contextmenu. 插件，方便用户右键操作。
表格效果
7月1日
表格代码
<el-table :data="tableData"
border
:row-style="{fontSize:'1.25rem'}"
:header-cell-style="{fontSize:'1.25rem'}"
style="width:100%;"
@header-contextmenu="headerContextmenu"
@row-contextmenu="rowContextmenu"
@cell-click="cellClick"
:span-method="objectSpanMethod">
<el-table-column v-for="(headerItem, headerIndex) in paramsHeader"
:key="headerIndex"
:index="headerIndex"
type="params">
<!-- 列，表头数据 -->
<template slot="header">
<span class="action-class"
@click='headerClick(headerItem,headerIndex)'>
{{headerItem.header}}
</span>
<!-- 列，右键菜单数据选择-->
<vue-context-menu :contextMenuData="paramsContextMenuData"
:transferIndex="paramsTransferIndex"
@addColumn="addParamsColumn(headerItem, headerIndex)"
@deleteColumn="deleteParamsColumn(headerItem, headerIndex)"></vue-context-menu>
</template>
<!-- 行数据-->
<template slot-scope="scope">
<span class="params-class">
{{scope.row.params[headerIndex].name}}
</span>
<!-- 行，右键菜单数据选择-->
<vue-context-menu :contextMenuData="paramsValueContextMenuData"
:transferIndex="paramsValueTransferIndex"
@clear="clearParamsRow(headerItem, headerIndex)"
@addRow="addParamsRow(headerItem, headerIndex)"
@deleteRow="deleteParamsRow(headerItem, headerIndex)"></vue-context-menu>
</template>
</el-table-column>
</el-table>数据格式需要
文章中部分数据定义未展示，请自行添加定义
表格数据格式
数据格式只适合本表格，如有优化请自行更改。数据中 id 用于行合并，请不要忽视
tableData: [
{
params: [
{
id: Math.random(),
name: '无'
}, {
id: Math.random(),
name: '无'
}
]
}, {
params: [
{
id: Math.random(),
name: '无'
}, {
id: Math.random(),
name: '无'
}
]
}
],右键菜单数据格式
菜单用于动态添加列，动态添加行。请自行修改
paramsContextMenuData: {
// the contextmenu name(@1.4.1 updated)
menuName: 'paramsHeader',
// The coordinates of the display(菜单显示的位置)
axis: {
x: null,
y: null
},
// Menu options (菜单选项)
menulists: [{
fnHandler: 'addColumn', // Binding events(绑定事件)
icoName: 'el-icon-plus',
btnName: '添加条件列' // The name of the menu option (菜单名称)
}, {
fnHandler: 'deleteColumn',
icoName: 'el-icon-delete',
btnName: '删除条件列'
}]
},实现方法
表格右键点击菜单事件
用于获取 列index，行index 和展示右键菜单弹出位置。index主要用于动态增加行和列
headerContextmenu (column, event) {
console.log(column)
this.paramsTransferIndex = column.index
event.preventDefault()
var x = event.clientX
var y = event.clientY
if (column.type === 'params') {
this.paramsContextMenuData.axis = {
x, y
}
} else {
this.valuationContextMenuData.axis = {
x, y
}
}
},
rowContextmenu (row, column, event) {
this.paramsValueTransferIndex = column.index
this.rowIndex = row.index
this.columnIndex = column.index
event.preventDefault()
var x = event.clientX
var y = event.clientY
if (column.type === 'params') {
this.paramsValueContextMenuData.axis = {
x, y
}
} else {
}
},表格单击事件
单击事件主要用于给表头或行赋值数据。可多种选择，作者用的是单击弹出弹框选择数据给行赋值。
表头点击事件没有用element-ui自带的事件，也可用，自行修改
// 表头点击事件
headerClick (headerItem, headerIndex) {
this.paDialogVisible = true
this.paramsIndex = headerIndex
},
// 行点击事件
cellClick (row, column, cell, event) {
this.rowIndex = row.index
this.columnIndex = column.index
if (column.type === 'params') {
this.conDialogVisible = true
}
},动态添加行、列
// 添加列
addParamsColumn (headerItem, headerIndex) {
// 添加列
this.paramsHeader.push(
{
header: '请选择参数或变量'
}
)
// 同时添加行
this.paramsHeader.forEach((header, headerIdnex) => {
this.decisionTableData.forEach((deci, deciIndex) => {
deci.params.push({
id: Math.random(),
name: '无'
})
})
})
},
// 添加行
addParamsRow (headerItem, headerIndex) {
this.decisionLoading = true
var paramsData = []
var valuation = []
if (headerIndex === 0) {
this.paramsHeader.forEach(el => {
paramsData.push({
id: Math.random(),
name: '无'
})
})
this.valuationHeader.forEach(va => {
valuation.push({
value: '无'
})
})
this.decisionTableData.push({
params: paramsData,
valuation: valuation
})
} else {
var id = null
var numIn = headerIndex - 1
if (numIn > 0) {
for (var i = 0; i < this.paramsHeader.length; i++) {
if (i <= numIn) {
for (var n = 0; n <= numIn; n++) {
id = this.decisionTableData[this.rowIndex].params[n].id
if (i === n) {
paramsData.push({
id: id,
name: '无'
})
}
}
} else {
paramsData.push({
id: Math.random(),
name: '无',
value: '无'
})
}
}
this.valuationHeader.forEach(va => {
valuation.push({
value: '无'
})
})
this.decisionTableData.splice(this.rowIndex, 0, {
params: paramsData,
valuation: valuation
})
} else {
id = this.decisionTableData[this.rowIndex].params[numIn].id
this.paramsHeader.forEach((el, index) => {
if (numIn === index) {
paramsData.push({
id: id,
name: '无',
value: '无'
})
} else {
paramsData.push({
id: Math.random(),
name: '无',
value: '无'
})
}
})
this.valuationHeader.forEach(va => {
valuation.push({
value: '无'
})
})
this.decisionTableData.splice(this.rowIndex, 0, {
params: paramsData,
valuation: valuation
})
}
}
this.rowspan(this.decisionTableData)
},表格每行单击事件
valueAcTyClick (item, dropdown, droIndex, headerIndex, scopeIndex) {
console.log(dropdown)
this.decisionLoading = true
this.columnIndex = headerIndex
this.rowIndex = scopeIndex
if (dropdown.value === 'Input') {
this.vaDialogVisible = true
this.valuationType = dropdown.value
this.valuationTitle = '输入值'
} else if (dropdown.value === 'Parameter') {
this.vaDialogVisible = true
this.valuationType = dropdown.value
this.valuationTitle = '选择变量'
} else {
// 清控单元格数据
var clearIndex = this.decisionTableData.indexOf(item)
this.decisionTableData[clearIndex].valuation[headerIndex].value = '无'
this.decisionLoading = false
}行合并事件
根据每行id进行合并
objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
// 表格合并行
for (var i = 0; i < this.spanArr.length; i++) {
var rowNum = this.spanArr[i].rowNum
var columNum = this.spanArr[i].columNum
var mergeNum = this.spanArr[i].mergeNum
if (columnIndex === columNum) {
if (rowIndex === rowNum) {
return {
rowspan: mergeNum,
colspan: 1
}
} else {
if (rowIndex !== 0 && rowIndex <= (rowNum + mergeNum - 1)) {
return {
rowspan: 0,
colspan: 0
}
}
}
}
}
// })
},引用
代码
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
