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) } }以上這篇淺談Vue render函數在ElementUi中的應用就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
