快捷導(dǎo)航

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

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

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

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

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

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

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

此時(shí)已經(jīng)可以實(shí)現(xiàn)點(diǎ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)聽(tīng)data中的inputValue，實(shí)現(xiàn)一些列業(yè)務(wù)邏輯

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

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

您可能感興趣的文章:

相關(guān)文章

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