某视频剪辑软件的提出函数在日常开发中被广泛应用，今天以ElementUI中的桌子表头重构为引，实际应用一下借助提出函数实现表头搜索，不足之处请多多指教！

首先引入官方演示

El-table : data=' table data ' style=' width : 100% ' : border=' true ' El-table-column prop=' date ' label='日期最小宽度='20% '对齐='中心/El-table-column El-table-column prop=' name ' label='姓名最小宽度='60% '对齐='中心/El-table-column El-table-column prop=' address ' label='地址align=' center '/El-table-column/El-table实现效果

之后为姓名列添加：渲染头=“渲染头”绑定提出函数

El-table-column : render-header=' render header ' prop=' name ' label='姓名最小宽度='60% '对齐='中心/El-表格-列在方法中实现renderHeader方法

方法： { RenderHeader(CreateElement){ let self=this return CreateElement(' div '，{ Domports 3360 { InnerHTML : ` span class=' span ' '姓名/span输入类型='text' class='input' ` }，style: { padding: ' 0 '，lineHeight: '1 '，marginTop: '5px '，width: '100%' }， { '！单击":函数(e){ let span=文档。getelementsbyclassname(' span ')[0]让input=document。getelementsbyclassname(' input ')[0]span。风格。显示=“无”输入。风格。display=' inline-block '输入。focus()事件。stopperopagation()} })}，在较少的文件中配合实现数字正射影像图的展示和隐藏。span { display : inline-block；}.输入{ display: none}此时已经可以实现点击表头出现输入框

之后需要为其绑定投入事件

: { '!单击' :函数(e){ let span=文档。getelementsbyclassname(' span ')[0]让input=document。getelementsbyclassname(' input ')[0]span。风格。显示=“无”输入。风格。display=' inline-block '输入。focus()事件。stop agation()}，input:函数(事件){自我。inputvalue=事件。目标。value//在数据中定义输入值}}之后我们就可以监听数据中的输入值，实现一些列业务逻辑

watch : { InputValue : function(){ console。日志(这个。输入值)} }以上这篇浅谈某视频剪辑软件渲染函数在ElementUi中的应用就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。