iviewui中表格控件中render的使用示例

最新推荐文章于 2024-04-15 08:01:21 发布
最新推荐文章于 2024-04-15 08:01:21 发布
阅读量2.4k 收藏
点赞数 1
分类专栏： JAVA、WEB开发 文章标签： iviewui render
　　示例了如何在表格中显示按钮，如何将代码转化为文字。
　　iviewui新版本中，如果内容转化输出时，如果不使用render函数，会显示不正常。老版本不存在这个问题。 


<!DOCTYPE html>

<!-- 
 功能：用户管理。
 -->
<html>
<head>
    <meta charset="utf-8">
    <title>用户</title>
    <link rel="stylesheet" type="text/css" href="../lib/iview/styles/iview.css">

	<style type="text/css">
		.btn__cell button{
			margin-left:3px;
			margin-right:3px;
		}
	</style>
</head>
<body class="main">
	<h2 class="page__title">用户列表</h2>
	<div id="listTable" v-cloak>
		<i-table border stripe size="small" :columns="tabColumn" :data="tabData.items" @on-sort-change="tabSort"></i-table>
		<div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
            <Page :total="tabData.totalCount" :show-total="true" :current="tabData.page" :page-size="tabData.limit" size="small" @on-change="tabPage"></Page>
        </div>
 	</div>

    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript" src="../lib/vue-resource.js"></script>
    <script type="text/javascript" src="../lib/iview/iview.js"></script>
	<script type="text/javascript">

		var listVue = new Vue({
			el:'#listTable',
			data:function(){
				var self = this;//保存本实例的指针
				return {
					//表格的标题定义
					tabColumn: [
	                    {
	                        title: '姓名',
	                        sortable: 'custom',
	                        width: 100,
	                        align:'center',
	                        key: 'name'
	                    },
	                    {
	                        title: '登录号',
	                        sortable:'custom',
	                        key: 'login'
	                    },
	                    {
	                        title: '可用标志',
	                        width: 100,
	                        key: 'validFlag',
	                        align: 'center',
	                        render:function(h,params){
	                        	return h('span',params.row.validFlag=='1'?'有效':'无效');
	                        }
	                    },
	                    {
	                        title: '操作',
	                        align:'center',
	                        width: 160,
	                        //渲染按钮
	                        render: function(h, params) {
	                            return h('span',{class:'btn__cell'}, [
	                                h('Button', {
	                                    props: {
	                                        type: 'primary',
	                                        size: 'small'
	                                    },
	                                    on: {
	                                        click: function() {
	                                            self.pwdReset(params.row.id);
	                                        }
	                                    }
	                                }, '重置'),
	                                h('Button', {
	                                    props: {
	                                        type: 'primary',
	                                        size: 'small'
	                                    },
	                                    on: {
	                                        click: function() {
	                                            self.addRole(params.row);
	                                        }
	                                    }
	                                }, '角色'),
	                                h('Button', {
	                                    props: {
	                                        type: 'primary',
	                                        size: 'small'
	                                    },
	                                    on: {
	                                        click: function() {
	                                            self.rowEdit(params.row);
	                                        }
	                                    }
	                                }, '编辑')
	                            ]);
	                        }
	                    }
	                ],
	                tabData:{},//表格数据，直接使用的mybatis分页插件返回的数据的格式。
	                keyword:'',//查找关键字
	                sortKey:'',//排序字段，为了与iview中的描述统一，变量名定成这样
	                sortDir:'',//排序方向
	                dummy:null//空变量，作为data区域的结尾
				};//end of return
			},
			mounted:function(){
				this.$nextTick(function(){
					//装载数据
				});
			}
		});

</body>
</html>
wallimn
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue iview组件表格 render函数的使用方法详解
08-27
* Render函数只能在表格列中使用。 * Render函数的返回值必须是一个合法的HTML元素。 * 在Render函数中，我们可以使用props、attrs、style、on等属性来设置元素的属性和事件。 结论 Vue iview组件的Render函数是一...
naive ui 表格 data-table 的一些自定义 用法
m0_64409387的博客
08-21 8020
3，拿到选中复选框的id（return 出去）3，return 出去。
iview UI框架中render函数的用法
weixin_42231184的博客
03-19 597
https://blog.csdn.net/weixin_38384967/article/details/83142348
iview使用render函数渲染嵌套表格，2024年最新干货分享英文
最新发布
m0_60707263的博客
04-15 868
使用return h函数返回title: ‘机器名称’,
vue的常见指令
a86669的博客
10-25 125
<!-- 我们学过的指令： v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染（动态控制节点是否存存在） v-else : 条件渲染（动态控制节点是否存存在） v-show : 条件渲染 (动态控制节点是否展示) v-text指令：（不推荐，插值语法
iview UI库中table的render函数
weixin_44864084的博客
04-29 2059
刚刚接触一个项目，一期使用的是iview，查看文档时发现并未介绍到render函数中类似createElement功能的用法，因此想做一个相关的分享，希望可以帮到跟我有类似需求的小伙伴们。 iview官方文档中对render是这样描述的： 自定义渲染列，传入三个参数 row、column 和 index，分别指当前单元格数据，当前列数据，当...
iview render函数（vue render函数）
weixin_56548455的博客
04-25 1224
如图可见，当元素嵌套时，元素里面的内容会覆盖父元素的内容，下图中左边的机台图片及信息该怎么显示呢？
Vue中render函数的使用方法
08-28
3. 实现复杂的 UI 组件：render 函数可以用来实现复杂的 UI 组件，例如数据表格、树形控件等。 示例一：按钮组件 下面是一个使用 render 函数实现的按钮组件： ```js export default { render(h) { return h('...
Iview 表格编辑
10-31
在本文中，我们将深入探讨如何实现Iview UI表格的动态编辑功能，这是一项在Web开发中经常遇到的需求，尤其在处理大量数据时。Iview是一个基于Vue.js的UI组件库，提供了丰富的界面元素，包括表格（Table）组件，用于...
element-ui table组件如何使用render属性的实现
10-16
主要介绍了element-ui table组件如何使用render属性的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
iview的render函数使用
weixin_30726161的博客
05-30 531
render渲染函数详解https://www.cnblogs.com/weichen913/p/9676210.html iview表格的render函数作用是自定义渲染当前列，权限高于key，所以使用了render函数，那么表格的key值就无效了。render函数传入两个参数，第一个是 h，第二个是对象，包含row、column和index，分别指当前单元格数据，当前列数据，当...
iview table的render()函数基本的用法
强哥叨逼叨
02-15 1万+
这里记录的是iviewui框架中render函数的用法。如下： 语法：render:(h,params)=&gt;{} 具体用法： render:(h,params) =&gt; { return h(" 定义的元素 "，{ 元素的性质 }，" 元素的内容"/[元素的内容]) } 案例： 当定义的元素没有其他元素时： render:(h,params)=&gt;{ retu...
view-ui中table组件的render( )函数基本使用
weixin_41777814的博客
04-09 1196
今天用到view-ui中的table组件，该组件中又涉及到render函数，简单整理一下render( )函数的基本使用方法。 render:(h,params) => { return h("定义的元素",{元素的样式与方法},"元素的内容") } 元素嵌套用法： render:(h,params)=>{ return h('定义的元素',{元素的样式与方法},[h('div','内容2')],'内容1') } 元素事件绑定： on: { click: () =&
iview render 函数中 button应用属性
lotte
11-24 1495
render函数拥有三个参数 1.一个 HTML 标签字符串 必选 2. 一个包含模板相关属性的数据对象 可选 3. 子虚拟节点 (VNodes) 可选 render: (h, params) => { let _this = this return h('div',[ h('i-button',{ props: { type...
iviewUI库使用table单元格渲染有input框时,input每输入一个字符就会自动跳出焦点
awei720的博客
05-18 9960
如图:想要把input框双向绑定,但是每当input中输入一个值的时候input总会失去焦点,查了很多文章,终于总到了解决办法,主要有两种解决办法:    1.创建一个临时空数组创建一个临时空数组，render内操作的是这个空数组内的对象，然后监听这个临时空数组，在赋值给table组件的data，render内操作的是这个空数组内的对象，然后监听这个临时空数组，在赋值给table组件的data  ...
iviewUI使用中遇到的问题与解决方案（一）
驚鴻入梦
01-03 1万+
项目中使用的iviewUI的版本是2.7.3，在使用中遇到的问题总结了一些，后续会更新，如果各位大神有遇到的坑欢迎评论补充1、modal的样式要放到最外面，否则样式给不到；2、iview组件的事件@on-change=fn,fn后面没有‘(参数)’；3、router-view不能放到tabs里面，组件会渲染两次，要把它单独拿出来4、FormItem里面input或者select不能用:model动
区块元素和行内元素这个修改方式你见过吗？
金玉满堂的博客
09-13 296
前端知识哦，我们知道标签分为区块元素和行内元素哦， 大多数 HTML 元素被定义为块级元素或内联元素。 块级元素在浏览器显示时，通常会以新行来开始（和结束）。 实例: , , , HTML 内联元素 内联元素在显示时通常不会以新行开始。 实例: , , , ` 看下面的网页哦！ 菜鸟教程(runoob.com) ​ 一帆风顺，万事如意 走马观花，人生顺利 b标签原来是行内元素哦，但是可以改变样式哦，将显示的改为block 对应的哦，如果改为p标签 <!DOCTYPE html
vue iview组件表格 render函数的使用
热门推荐
zjl516088421的博客
09-22 3万+
如果要在标签中加入属性，例如img 中src属性 a标签中href属性 此时需要用到 attrs 来加入而不是props { title: '操作', key: 'action', align: 'center', render: function (h, params) { return h('div', [ h('Button', {
iview+vue开发Table组件render踩坑记录
weixin_33975951的博客
12-21 879
开发过程中遇到readyOver is not a function的报错 很明显是this指向出现了问题，打印this后发现this指向了render函数本身 错误写法： 正确写法： 总结 问题出在了render函数没有写成箭头函数的形式，所以造成this指向出现问题。 ...
iview中的表格render函数如何写入disabled
05-30
在iview的表格组件中，可以通过render函数来自定义表格的每一列。如果你想要在表格中的某一列中添加一个disabled属性，可以按照以下方式编写代码： ```javascript title="操作" key="action" align="center...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值