淺談Vue render函數(shù)在ElementUi中的應用

更新時間：2018年09月06日 11:09:54 作者：Nick_YangXiaoTong

今天小編就為大家分享一篇淺談Vue render函數(shù)在ElementUi中的應用，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue的render函數(shù)在日常開發(fā)中被廣泛應用，今天以ElementUI中的table表頭重構為引，實際應用一下借助render函數(shù)實現(xiàn)表頭搜索，不足之處請多多指教！

首先引入官方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>

實現(xiàn)效果

之后為姓名列添加 :render-header=”renderHeader” 綁定render函數(shù)

<el-table-column :render-header="renderHeader" prop="name" label="姓名" min-width="60%" align="center" >
</el-table-column>

在methods中實現(xiàn)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文件中配合實現(xiàn)DOM的展示和隱藏

.span {
  display: inline-block;
}
.input {
  display: none;
}

此時已經可以實現(xiàn)點擊表頭出現(xiàn)輸入框

之后需要為其綁定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
 }
}

之后我們就可以監(jiān)聽data中的inputValue，實現(xiàn)一些列業(yè)務邏輯

watch: {
 inputValue: function () {
  console.log(this.inputValue)
 }
 }

以上這篇淺談Vue render函數(shù)在ElementUi中的應用就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue中的base64圖片轉網(wǎng)絡URL方式
在Vue中,可以直接將Base64編碼的圖片賦值給img元素的src屬性,此外,也可以通過JavaScript的URL.createObjectURL()方法將Base64轉換為Blob URL,進而轉換為File對象,并可進一步轉換為PNG或其他格式的圖片,這種轉換技術在前端開發(fā)中非常實用
2024-10-10
vue實現(xiàn)簡單學生信息管理
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單學生信息管理，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-05-05
Vue綁定用戶接口實現(xiàn)代碼示例
這篇文章主要介紹了Vue綁定用戶接口代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-11-11
vue創(chuàng)建項目卡住不動,vue?create?project卡住不動的解決
這篇文章主要介紹了vue創(chuàng)建項目卡住不動,vue?create?project卡住不動的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
關于vue二進制轉圖片顯示問題后端返回的是byte[]數(shù)組
這篇文章主要介紹了關于vue二進制轉圖片顯示問題后端返回的是byte[]數(shù)組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
詳解vue 中 scoped 樣式作用域的規(guī)則
這篇文章主要介紹了vue 中 scoped 樣式作用域的規(guī)則，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-09-09
vue中使用v-for時為什么不能用index作為key
這篇文章主要介紹了vue中使用v-for時為什么不能用index作為key，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
vue的for循環(huán)使用方法
在本篇文章里小編給大家整理了關于vue的for循環(huán)使用方法和步驟，有需要的朋友們跟著學習下。
2019-02-02
vue使用drag與drop實現(xiàn)拖拽的示例代碼
本篇文章主要介紹了vue使用drag與drop實現(xiàn)拖拽的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
Vue3?Suspense實現(xiàn)優(yōu)雅處理異步數(shù)據(jù)加載
Suspense?是?Vue?3?中用于處理異步數(shù)據(jù)加載的特性,它使得在加載異步數(shù)據(jù)時可以提供更好的用戶體驗,下面小編就來和大家詳細講講Suspense如何優(yōu)雅處理異步數(shù)據(jù)加載吧
2023-10-10