Element-UI

el-table的header里使用render加表单

2021-08-12  本文已影响0人  Frank_Fang

header加表单,需要使用render函数

<el-table-column align="center" :prop="col.prop" :type="col.type" :sortable="col.sortable" :width="col.width" :render-header="(h)=>renderHeader(h,col)" />
renderHeader (h, col) {
      return h('span', [
        h('span', {
          domProps: {
            innerText: col.label
          }
        }),
        h(
          'el-popover',
          {
            props: {
              placement: 'bottom',
              trigger: 'hover',
              'open-delay': 400,
              'close-delay': 400
            }
          },
          [
            h(
              'el-link',
              {
                props: {
                  underline: false
                },
                slot: 'reference'
              },
              [
                h('i', {
                  class: {
                    'pwc-icon-filter-outline': true
                  },
                  style: {
                    verticalAlign: 'baseline'
                  }
                })
              ]
            ),
            h(
              'el-input',
              {
                style: {
                  width: '280px'
                },
                props: {
                  placeholder: this.$t('placeholder.filter'),
                  value: this.searchForm[col.prop],
                  clearable: true
                },
                on: {
                  input: (event) => {
                    this.searchForm[col.prop] = event
                  }
                }
              },
              [
                h('el-button', {
                  slot: 'append',
                  domProps: {
                    innerText: this.$t('btn.filter')
                  },
                  on: {
                    click: () => {
                      this.search()
                    }
                  }
                })
              ]
            )
          ]
        )
      ])
    }


上一篇 下一篇

猜你喜欢

热点阅读