下拉框效果.jpg

// template

<el-table :data="data" size="medium" height="200">
  <el-table-column prop="date" label="日期" :render-header="renderHeader">
  </el-table-column>
  <el-table-column prop="name" label="姓名" :render-header="renderHeader">
  </el-table-column>
  <el-table-column prop="address" label="地址" :render-header="renderHeader">
  </el-table-column>
</el-table>

// methods

renderHeader(h, { column }) {
  return h('div', {}, [
    h(
      'span',
      {
        style: {
          marginRight: '10px'
        }
      },
      column.label
    ),
    h(
      'el-popover',
      {
        props: {
          placement: 'bottom-start',
          width: '240',
          trigger: 'click'
        }
      },
      [
        h(
          'el-form',
          {
            props: {
              model: this.fieldForm,
              labelPosition: 'right',
              labelWidth: '80px',
              size: 'small'
            }
          },
          [
            h('el-form-item', { props: { label: '名称' } }, [
              h('el-input', {
                props: {
                  disabled: !this.fieldForm.editableName,
                  value: this.fieldForm.name,
                  clearable: true
                },
                style: {
                  width: '80%'
                },
                on: {
                  input: (value) => {
                    this.fieldForm.name = value
                  }
                }
              }),
              h('i', {
                class: 'el-icon-edit-outline',
                style: {
                  cursor: 'pointer',
                  marginLeft: '6px'
                },
                props: {},
                on: {
                  click: () => {
                    this.fieldForm.editableName = true
                  }
                }
              })
            ]),
            h('el-form-item', { props: { label: '维度' } }, [
              h(
                'el-select',
                {
                  props: {
                    value: this.fieldForm.dimension
                  },
                  style: {
                    width: '90%'
                  },
                  on: {
                    input: (value) => {
                      this.fieldForm.dimension = value
                    }
                  }
                },
                [
                  this.dimensionOptions.map((item) => {
                    return h('el-option', {
                      props: {
                        value: item.value,
                        label: item.label
                      }
                    })
                  })
                ]
              )
            ]),
            h('el-form-item', { props: { label: '字段类型' } }, [
              h(
                'el-select',
                {
                  props: {
                    value: this.fieldForm.fieldType
                  },
                  style: {
                    width: '90%'
                  },
                  on: {
                    input: (value) => {
                      this.fieldForm.fieldType = value
                    }
                  }
                },
                [
                  this.fieldTypeOptions.map((item) => {
                    return h('el-option', {
                      props: {
                        value: item.value,
                        label: item.label
                      }
                    })
                  })
                ]
              )
            ]),
            h('el-form-item', {}, [
              h('el-button', {
                props: {
                  type: 'primary'
                },
                domProps: {
                  innerText: '保 存'
                }
              }),
              h('el-button', {
                domProps: {
                  innerText: '取 消'
                }
              })
            ])
          ]
        ),
        h('i', {
          slot: 'reference',
          class: 'el-icon-arrow-down',
          style: {
            cursor: 'pointer'
          },
          props: {}
        })
      ]
    )
  ])
}