elementui自定义头部render-header

https://cn.vuejs.org/v2/guide/render-function.html 官方api文档。。。参数配置-渲染函数

大概效果就是增加模糊搜索。。然后列表展示。

	这种是直接显示-----

<el-table-column  >
      <!-- 自定义表头 -->
      <template slot="header" slot-scope="scope">
        <el-dropdown>
          <span>
            名称
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-input type="text" placeholder="请输入名称" v-model="modal" @input="change" />
            <el-dropdown-item v-for="item in tableData" :key="item.id">{
   
   {item.name}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </template>
    </el-table-column>

render-header  ---直接添加一个搜索框用户输入然后直接显示

 methods: {
    renderHeader (h, { column }) {
      // 下拉框内容包裹在一个div里面
      return h(
        'el-dropdown', [
        h(
          'span', {

          domProps: {
            innerHTML: '名称<i class="el-icon-arrow-down el-icon--right"></i>'
          }
        },
        ),
        h(
          'el-dropdown-menu', {
          slot: 'dropdown'
        }, [
          h('el-input', {
            props: {
              value: '',
              placeholder: '请输入名称'
            },
            on: {
              input: value => {
                console.log(value);
                // console.log(this.$store.state)
                // this.SET_APPLABS('')
                // console.log(this.projectsData.app_labs)
                // this.$store.state.projectsData.app_labssplice(0, 1)
                // this.projectsData.app_labs.splice(0, 1)
              }
            }
          })
        ]
        )
      ]
      )
    },