`

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

iviewuirender 
阅读更多
　　示例了如何在表格中显示按钮，如何将代码转化为文字。
　　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>
0
顶
0
踩
分享到：
| Tomcat错误“Alias name tomcat does not i ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics