浅谈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 相关文章推荐
jquery插件 autoComboBox 下拉框
Dec 22 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
javascript中select下拉框的用法总结
Jan 07 Javascript
javascript瀑布流式图片懒加载实例
Jun 28 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
Apr 13 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
vue中实现图片和文件上传的示例代码
Mar 16 Javascript
解决vue中虚拟dom,无法实时更新的问题
Sep 15 Javascript
在Vue中使用HOC模式的实现
Aug 23 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
从C/C++迁移到PHP——判断字符类型的函数
2006/10/09 PHP
php 文件上传实例代码
2012/04/19 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
php5与php7的区别点总结
2019/10/11 PHP
laravel 创建命令行命令的图文教程
2019/10/23 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
ExtJS的拖拽效果示例
2013/12/09 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
2016/07/22 Javascript
jQuery实现导航高亮的方法【附demo源码下载】
2016/11/09 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
Vue-CLI3.x 设置反向代理的方法
2018/12/06 Javascript
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
scrapy spider的几种爬取方式实例代码
2018/01/25 Python
python实现list由于numpy array的转换
2018/04/04 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
Python3.6 + TensorFlow 安装配置图文教程(Windows 64 bit)
2020/02/24 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
Python自动化办公Excel模块openpyxl原理及用法解析
2020/11/05 Python
pycharm 实现光标快速移动到括号外或行尾的操作
2021/02/05 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
Mybag美国/加拿大:英国奢华包包和名牌手袋网站
2020/02/16 全球购物
给小学生的新年寄语
2014/04/04 职场文书
模具设计与制造专业求职信
2014/07/19 职场文书
寒山寺导游词
2015/02/03 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
环保建议书作文300字
2015/09/14 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
关于使用Redisson订阅数问题
2022/01/18 Redis
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL