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

末蓝、 2022-04-06 13:40 303阅读 0赞

示例了如何在表格中显示按钮，如何将代码转化为文字。  
　　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>