浅谈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 对象链式操作测试代码
Apr 25 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
分析Node.js connect ECONNREFUSED错误
Apr 09 Javascript
node.js中的emitter.on方法使用说明
Dec 10 Javascript
Javascript中实现trim()函数的两种方法
Feb 04 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
Oct 28 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
javascript简单链式调用案例分析
May 10 Javascript
Vue封装Axios请求和拦截器的步骤
Sep 16 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 字符串 小常识
2009/06/05 PHP
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
新手学习PHP的一些基础知识分享
2011/07/27 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
php getcwd与dirname(__FILE__)区别详解
2016/09/24 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
js过滤数组重复元素的方法
2010/09/05 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
js+div实现图片滚动效果代码
2014/02/10 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
Vue CLI3基础学习之pages构建多页应用
2019/06/02 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
Python实现的数据结构与算法之快速排序详解
2015/04/22 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
Python装饰器语法糖
2019/01/02 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
Python 读取串口数据,动态绘图的示例
2019/07/02 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
python实现学生管理系统开发
2020/07/24 Python
水芝澳美国官网:H2O Plus
2016/10/15 全球购物
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
金融专业个人的自我评价
2013/10/18 职场文书
单位未婚证明范本
2014/01/18 职场文书
设计顾问服务计划书
2014/05/04 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
英语复习计划
2015/01/19 职场文书
学雷锋献爱心活动总结
2015/05/11 职场文书
安全生产学习心得体会
2016/01/18 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书