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