浅谈Vue render函数在ElementUi中的应用


Posted in Javascript onSeptember 06, 2018

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>

实现效果

浅谈Vue render函数在ElementUi中的应用

之后为姓名列添加 :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;
}

此时已经可以实现点击表头出现输入框

浅谈Vue render函数在ElementUi中的应用

之后需要为其绑定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中的应用就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 定时器调用传递参数的方法
Nov 12 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
js自定义select下拉框美化特效
May 12 Javascript
vue-cli脚手架config目录下index.js配置文件的方法
Mar 13 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
Mar 15 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
vue实现Excel文件的上传与下载功能的两种方式
Jun 28 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
如何实现js拖拽效果及原理解析
May 08 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 #Javascript
vue template中slot-scope/scope的使用方法
Sep 06 #Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 #Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
Vue下拉框回显并默认选中随机问题
Sep 06 #Javascript
vue兄弟组件传递数据的实例
Sep 06 #Javascript
webpack4简单入门实例
Sep 06 #Javascript
You might like
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
php实现转换html格式为文本格式的方法
2016/05/16 PHP
TNC vs RR BO3 第一场 2.14
2021/03/10 DOTA
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
js 绑定键盘鼠标事件示例代码
2014/02/12 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
jquery 手势密码插件
2017/03/17 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
nodejs爬虫初试superagent和cheerio
2018/03/05 NodeJs
vue配置多页面的实现方法
2018/05/22 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
创建与框架无关的JavaScript插件
2020/12/01 Javascript
python 域名分析工具实现代码
2009/07/15 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python实现周期方波信号频谱图
2018/07/21 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
Python简易计算器制作方法代码详解
2019/10/31 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
详解BeautifulSoup获取特定标签下内容的方法
2020/12/07 Python
C语言变量的命名规则都有哪些
2013/12/27 面试题
如何写你的创业计划书
2014/01/07 职场文书
大二学生学习个人自我评价
2014/01/19 职场文书
《蓝色的树叶》教学反思
2014/02/24 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2014年计划生育工作总结
2014/11/14 职场文书
外国人来华邀请函
2015/01/31 职场文书
2015年基层党支部工作总结
2015/05/21 职场文书
莫言获奖感言(全文)
2015/07/31 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书
java如何实现获取客户端ip地址的示例代码
2022/04/07 Java/Android