1. 程式人生 > >Vue——render函式在ElementUi中的應用

Vue——render函式在ElementUi中的應用

vue的render函式在日常開發中被廣泛應用,今天以ElementUI中的table表頭重構為引,實際應用一下藉助render函式實現表頭搜尋,不足之處請多多指教!

首先引入官方demo
<el-table :data="tableData" style="width: 100%" :border="true">
    <el-table-column prop="date" label="日期" min-width="20%" align="center">
    </el-table-column>
    <el-table-column prop=
"name" label="姓名" min-width="60%" align="center"> </el-table-column> <el-table-column prop="address" label="地址" align="center"> </el-table-column> </el-table>
實現效果

這裡寫圖片描述

之後為姓名列新增 :render-header=”renderHeader” 繫結render函式
<el-table-column :render-header="renderHeader"
prop="name" label="姓名" min-width="60%" align="center" > </el-table-column>
在methods中實現renderHeader方法
methods: {
    renderHeader (createElement) {
      let self = this
      return createElement('div', {
        domProps: {
          innerHTML: `
                <span class="span">姓名</span>
                <input type
=
"text" class="input"> ` }, style: { padding: '0', lineHeight: '1', marginTop: '5px', width: '100%' }, on: { '!click': function (e) { let span = document.getElementsByClassName('span')[0] let input = document.getElementsByClassName('input')[0] span.style.display = 'none' input.style.display = 'inline-block' input.focus() event.stopPropagation() } } }) } },
在less檔案中配合實現DOM的展示和隱藏
.span {
     display: inline-block;
}
.input {
     display: none;
}
此時已經可以實現點選表頭出現輸入框

這裡寫圖片描述

之後需要為其繫結input事件
on: {
   '!click': function (e) {
    let span = document.getElementsByClassName('span')[0]
    let input = document.getElementsByClassName('input')[0]
    span.style.display = 'none'
    input.style.display = 'inline-block'
    input.focus()
    event.stopPropagation()
  },
   input: function (event) {
     self.inputValue = event.target.value  // 在data中定義inputValue
  }
}
之後我們就可以監聽data中的inputValue,實現一些列業務邏輯
watch: {
    inputValue: function () {
      console.log(this.inputValue)
    }
  }