iview的表格自定义_iview表格render

关于 Render

React 和 Vue 2 都使用了 Virtual Dom 技术，Virtual Dom 并不是真正意义上的 DOM，而是一个轻量级的 JavaScript 对象，在状态发生变化时，Virtual Dom 会进行 Diff 运算，来更新只需要被替换的 DOM，而不是全部重绘。与 DOM 操作相比，Virtual Dom 是基于 JavaScript 计算，所以开销会小很多。

在 Vue2 里，就是通过 Render 函数来实现 Virtual Dom 的。

iview3.2.0版本以前表格需要自定义列模板就是需要render来实现

例如

render: (h, params) => {

return h('div', [

h('Icon', {

props: {

type: 'person'

}

}),

h('strong', params.row.name)

]);

}

有时候觉得很麻烦，变结合Vue.compile写了个简单的编译方法

Vue.prototype.$compile =function(template){

let result=Vue.compile(template);

if(result.staticRenderFns.length){

return result.staticRenderFns[0].call(this);

}else{

return result.render.call(this)

}

};

可能不是满足所有情况,但目前我遇到的不是很复杂的情况都可以满足

render: (h, params) => {

return this.$compile(`

属性a:${params.row.a}属性b-c:${params.row.b}-${params.row.c}区域:${params.row.provinceName + params.row.cityName + params.row.countyName}

}

$compile里面作用域是当前的vue组件,所以如果需要用v-if``v-show等指令的话需要v-if="list[${params.index}].a]" list是表格的data。

当然了iview3.2.0版本后有了slot-scope就好用多了

iview的表格自定义_iview表格render相关推荐

iView表格自定义展开、render函数的使用
iView版本3.0.因为展开的样式不太符合预期.只能自定义. 之前一直习惯使用template.render渲染函数使用很少.这次算是简单的认识下.代码写的不好大佬们不要见怪! 效果图完整代码 & ...
iview的表格自定义_iview table组件自定义表头
在实际项目开发中,我们经常会用到各种各样的表格,比如在表格表头中填加按钮,下拉菜单,图标等等,在网上搜了一段时间发现比较少,所以写好之后就想着分享出来给有需要的人参考参考,例如下面这种表头带图标的: ...
iview的表格自定义_iview table 实现在数据中自定义标识
开源Word读写组件DocX 的深入研究和问题总结一. 前言前两天看到了asxinyu大神的[原创]开源Word读写组件DocX介绍与入门,正好我也有类似的自动生成word文档得需求,于是便仔细的 ...
iView学习笔记(三)：表格搜索，过滤及隐藏列操作
iView学习笔记(三):表格搜索,过滤及隐藏某列操作 1.后端准备工作环境说明 python版本:3.6.6 Django版本:1.11.8 数据库:MariaDB 5.5.60 新建Django ...
poi-tl导出word；自定义列表序号和表格宽度，表格合并，自定义标题，更新目录
文章目录 poi-tl 入门示例 1.准备word模板 2.代码自定义列表序号 1. poi-tl 支持的序号列表,直接使用文档种说明即可 2. 要是没有,可以利用NumberingFormat类去 ...
layui单据打印_layui打印表格自定义函数
函数如下 function print (tablelayid) { var v = document.createElement("div"); var f = [" ...
layui中的数据表格-自定义模板
layui中的数据表格-自定义模板<script>layui.use('table', function () {var table = layui.table;//第一个实例table. ...
更改mysql表显示数据条数_layui数据表格自定义每页条数limit设置
废话不多说,直接上代码吧!如下所示: table.render({ elem: '#data_grid' //,width: 900 //,height: 274 ,cols: [[ //标题栏 {f ...
5如何将表格的一行数据清空_微信公众号推文中如何自定义添加表格？
微信公众号发的图文消息里经常需要有表格,因为表格进行数据展现更直观明了,所以接下来就给大家分享一下如何自定义添加表格.打开小蚂蚁编辑器,在编辑区点击鼠标右键,在出现的选项中选择[插入表格]. 系统会默 ...

iview的表格自定义_iview表格render

iview的表格自定义_iview表格render相关推荐

最新文章

热门文章