//下图是tableData的接口返回格式:
下图是tableColumns的接口返回格式:
<el-table :data="tableData" border style="width:100%;">
<el-table-column
v-for="(item,index) in tableColumns"
:key="index"
:prop="item.name"
:label="item.name"
:min-width="250"
:render-header="renderHeader"
>
</el-table-column>
</el-table>
1.获取tableData的值
const data = res.data.data.data // 一个数组中10个数组
this.tableColumns = res.data.data.columnList
let datajson = {}
for (let i = 0; i < data.length; i++) {
for (let j = 0; j < this.tableColumns.length; j++) {
datajson[this.tableColumns[j]] = data[i][j]
}
this.tableData.push(datajson)
datajson = {}
}
2.tableColumns的值获取
res.data.data.result.forEach(item => {
this.tableColumns.push({
id: item.id,
name: item.alias,
showEdit: 'none',
showSave: 'none',
sortData: 'inline',
type: 'span',
height: ''
})
})
3.renderHeader函数:
renderHeader (h, { column, $index }) {
let data = this.tableColumns[$index]
return h(
'div',
{
on: {
mouseover: this.showHeaderEdit,
mouseleave: this.closeEdit
},
style: {
cursor: 'pointer',
width: '100%'
}
},
[
h('el-dropdown', {
on: {
command: this.commandSort
},
attrs: {
trigger: "click",
size: 'small'
},
'style': {
display: 'inline',
marginLeft: '-20px'
}
}, [
h('span', {
'style': {
cursor: 'pointer',
color: '#409EFF'
}
}, [
h('i', {
'class': {
'el-icon-caret-bottom': true,
},
'style': {
display: 'inline',
fontSize: '20px',
lineHeight: '10px'
}
}),
]),
h('el-dropdown-menu',
{
slot: 'dropdown'
},
// 子元素使用[]
[
h('el-dropdown-item', {
domProps: {
innerHTML: '数值'
},
attrs: {
icon: 'el-icon-plus',
command: '1',
}
}),
h('el-dropdown-item', {
domProps: {
innerHTML: '日期'
},
attrs: {
icon: 'el-icon-plus',
command: '2',
}
}),
h('el-dropdown-item', {
domProps: {
innerHTML: '文本'
},
attrs: {
icon: 'el-icon-plus',
command: '3',
}
}),
]
),
]),
h(
data.type,
{
attrs: {
id: data.id,
value: column.label
},
style: {
width: '80px',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}
},
column.label
),
h('el-button', {
attrs: {
type: 'text',
icon: 'el-icon-edit'
},
style: {
display: data.showEdit,
width: data.width,
height: '20px'
},
on: {
click: this.editClick
}
}),
h('el-button', {
attrs: {
type: 'text',
icon: 'el-icon-check'
},
style: {
display: data.showSave,
height: '20px',
},
on: {
click: this.saveClick
}
}),
h('el-button', {
attrs: {
type: 'text',
icon: 'el-icon-close'
},
style: {
display: data.showSave,
height: '20px',
},
on: {
click: this.cancelClick
}
})
]
)
},
showHeaderEdit (val) {
if (val.target.childNodes.length === 0) {
//
if (val.path.length === 26) {
this.textNumid = (val.path[3]).childNodes[1].id
} else {
this.textNumid = (val.path[2]).childNodes[1].id
}
} else if (val.target.childNodes.length === 2 || val.target.childNodes.length === 3) {
this.textNumid = (val.path[1]).childNodes[1].id
} else if (val.target.childNodes.length === 1) {
this.textNumid = (val.path[0]).id
} else {
// 从左侧进入带下拉选项的
this.textNumid = val.target.childNodes[1].id
}
if (val.target.childNodes.length !== 0) {
let column = val.target.innerText
this.tableColumns.forEach(item => {
if (item.name === column) {
item.showEdit = 'inline'
}
})
}
},
closeEdit (val) {
let column = val.target.childNodes[1].innerText
this.tableColumns.forEach(item => {
if (item.name === column) {
item.showEdit = 'none'
}
})
},
editClick (val) {
let column = val.path[2].innerText
this.tableColumns.forEach(item => {
if (item.name === column) {
item.showEdit = 'none'
item.type = 'input'
item.showSave = 'inline'
}
})
},
cancelClick (val) {
let column = val.path[2].childNodes[1].defaultValue
this.tableColumns.forEach(item => {
if (item.name === column) {
item.showEdit = 'none'
item.type = 'span'
item.showSave = 'none'
}
})
},