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>