浅谈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 相关文章推荐
让你的网站可编辑的实现js代码
Oct 19 Javascript
js 幻灯片的实现
Dec 06 Javascript
jquery中的事件处理详细介绍
Jun 24 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
npm国内镜像 安装失败的几种解决方案
Jun 04 Javascript
react-native使用react-navigation进行页面跳转导航的示例
Sep 07 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 Javascript
Web应用开发TypeScript使用详解
May 25 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注释实例技巧
2008/10/03 PHP
php adodb连接不同数据库
2009/03/19 PHP
30 个很棒的PHP开源CMS内容管理系统小结
2011/10/14 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
php获取字符串前几位的实例(substr返回字符串的子串用法)
2017/03/08 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
Javascript学习笔记2 函数
2010/01/11 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
JavaScript 用Node.js写Shell脚本[译]
2012/09/20 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
2012/11/07 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
thinkphp 表名 大小写 窍门
2015/02/01 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
Node.js与MySQL交互操作及其注意事项
2016/10/05 Javascript
DOM 事件的深入浅出(一)
2016/12/05 Javascript
jQuery Password Validation密码验证
2016/12/30 Javascript
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
[01:20]DOTA2更新全新英雄 天涯墨客现已加入游戏
2018/08/25 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python 网络编程起步(Socket发送消息)
2008/09/06 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
Tornado 多进程实现分析详解
2018/01/12 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
化学工程专业求职信
2014/08/10 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
培训心得体会怎么写
2016/01/25 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python
openstack云计算keystone组件工作介绍
2022/04/20 Servers