vue+elementui table 表头循环出来，加下拉条件，还可以编辑

//下图是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'
        }
      })
},