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

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>

实现效果

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

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

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

赞 (0)

相关推荐

  • Vue中render函数的使用方法

    render函数 vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. 什么情况下适合使用render函数 在一次封装一套通用按钮组件的工作中,按钮有四个样式(default success error ).首先,你可能会想到如下实现 <div v-if="type === 'success'">success</div> <div v-else

  • vue中render函数的使用详解

    render函数 vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. render方法的实质就是生成template模板: 通过调用一个方法来生成,而这个方法是通过render方法的参数传递给他的: 通过这三个参数,可以生成一个完整的模板 官网实例 //未使用render函数 Vue.component('anchored-heading', { template: '#anchor

  • 解析vue data不可以使用箭头函数问题

    首先需要明确,a() {}和 b: () => {}是不同的 let obj = { a() {}, // 相当于 a:function() {}, b: () => {} } 1 VUE.js 源码解析 注意此处只设计核心代码 这段代码也是UMD实现原理,本文这里不是重点,有兴趣的可以自行探究. (function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined'

  • 浅谈Vue中render中的h箭头函数

    vue2.0新增了render方法,官方案例写的是: render: h=>h(app) 其中h是由createElement方法演变而来 render: function(createElement){ return createElement(app) } 用es6的写法就是:(只有一个个return语句,可以省略return和{}) render: createElement=>createElement(app) 将createElement改成 h 就是官方写法. 使用 h 的理由,

  • 详解vue渲染函数render的使用

    详解vue渲染函数render的使用

    1.什么是render函数? vue通过 template 来创建你的 HTML.但是,在特殊情况下,这种写死的模式无法满足需求,必须需要js的编程能力.此时,需要用render来创建HTML. 比如如下我想要实现如下html: <div id="container"> <h1> <a href="#" rel="external nofollow" rel="external nofollow"

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

    vue的render函数在日常开发中被广泛应用,今天以ElementUI中的table表头重构为引,实际应用一下借助render函数实现表头搜索,不足之处请多多指教! 首先引入官方demo <el-table :data="tableData" style="width: 100%" :border="true"> <el-table-column prop="date" label="日期&quo

  • 浅谈使用splice函数对数组中的元素进行删除时的注意事项

    使用splice函数对数组中的元素进行删除时的注意事项 删除值为c的元素: <script> var arr = new Array(); arr[0] = 'a'; arr[1] = 'b'; arr[2] = 'c'; arr[3] = 'c'; arr[4] = 'e'; for(var i=0; i<arr.length; i++){ if(arr[i] == 'c'){ arr.splice(i,1); i=i-1; // 必须对i减去1,否则后面的一个元素会被跳过去 } }

  • 浅谈vue的iview列表table render函数设置DOM属性值的方法

    如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属

  • 浅谈vue中改elementUI默认样式引发的static与assets的区别

    浅谈vue中改elementUI默认样式引发的static与assets的区别

    首先从这说起 vue项目中的elementUI的默认样式怎么改 由于elementUI的样式太单调,比如这个slider滑块 elementUI中的API是没办法改变这个slider的颜色的,可是老板喜欢很黄,非要用yellow色.

  • 浅谈vue使用axios的回调函数中this不指向vue实例,为undefined

    今天在vue-cli脚手架搭建的项目中使用axios时,遇到无法解析this.$route的报错信息,最后发现是作用域的问题. 1.解决方法:使用 => 原代码: axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); 修改为: axios.get('/u

  • 浅谈vue中使用编辑器vue-quill-editor踩过的坑

    结合vue+element-ui+vue-quill+editor二次封装成组件 1.图片上传 分析原因 项目中使用vue-quill-editor富文本编辑器,在编辑内容的时候,我们往往会编辑图片,而vue-quill-editor默认的处理方式是直接将图片转成base64格式,导致上传的内容十分庞大,且服务器接受post的数据的大小是有限制的,很有可能就提交失败,造成用户体验差. 引入element-ui 编辑editor.vue文件 <template> <div> <

  • 浅谈Vue Element中Select下拉框选取值的问题

    之前写了.一个原生的select的,因为展示效果原因,给删除掉了,忘记保存代码了,现在大家展示使用elementUI的下拉框封装一个组件,供咱们项目中经常调用,减少代码量. html: <el-select v-model="ite" placeholder="请选择" value-key="mateGroup"> <el-option style="width: auto" :disabled="

  • 浅谈vue.js导入css库(elementUi)的方法

    1.安装以下模块,让webpack可以解析css文件 cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnpm install file-loader --save-dev 2.安装elementUi模块 cnpm install element-ui@next -S 3.在webpack.base.conf.js中添加配置 { test: /\\\\\\\\.css$/, loader: "styl

  • 浅谈vue中$bus的使用和涉及到的问题

    Hello大家周末好,最近项目比较忙所以没有及时的更新抱歉,今天给大家讲一vue.bus.使用过的都知道$bus是兄弟之间相互传值的项目中说实话用的地方不算多但是也会用到(每一个领域都是会有坑的呀). 1:创建$bus文件 创建一个文件内容如下: import Vue from 'vue' export default new Vue(); 2:引入$bus main.js: import Bus from './views/bus/bus'; Vue.prototype.$bus = Bus;

随机推荐