html部分,涉及到$t的是以i18n解决label国际化
<el-table :data="table.data" stripe border :height="$(window).height()==0?450:$(window).height()*0.7" highlight-current-row
size="small" @selection-change="selectCases" @row-dblclick="msg" >
<el-table-column type="selection" width="40"> </el-table-column>
<el-table-column :label="$t(col.title)" :width="col.width" v-for="col in table.col" >
<template slot-scope="scope">
<div v-if="col.formatter==undefined">{{scope.row[col.field]}}</div>
<div v-if="col.formatter!=undefined && typeof(col.formatter(scope.row[col.field],scope.row))=='string'">
{{col.formatter(scope.row[col.field],scope.row)}}
</div>
<div v-if="col.formatter!=undefined && typeof(col.formatter(scope.row[col.field],scope.row))=='object'">
<el-tag :type="col.formatter(scope.row[col.field],scope.row).type"
effect="dark" style="width:100%" size="small">
{{col.formatter(scope.row[col.field],scope.row).value}} </el-tag>
</div>
</template>
</el-table-column>
</el-table>
<div class="block">
<!-- 页码 -->
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="table.sync" :page-sizes="table.pagesizes"
:page-size="table.pagesize" layout="total, sizes, prev, pager, next, jumper"
:total="table.total"> </el-pagination>
</div>
vue 部分部分示例:
data:{
table:{//表格数据
"col":[
{field : "productId", title : "list.productId", width : "100",
formatter : function(value, row, index) {
return vm.productJson[value]==undefined?value:vm.productJson[value];
}},
{field : "channelName", title : "list.channelName", width : "100"},
],
"pagesizes":[1,10,15, 20, 30, 100],//size选择器
"pagesize ":10,
"sync":1,//当前页数
"total":0,
"data":[],
selects:[],//表格选中行
},
},
methods : {
selectCases:function(selects){//选择款选中或其他选中
this.table.selects=selects;
},
handleCurrentChange:function(val) {//table 查询
this.load(val,0);
},
handleSizeChange:function(val) {//table 查询
this.load(0,val);
},
enterLoad:function(){
this.table.sync=1;
this.load(1);
},
load:function(page,size){//查询
var th = this;
if(page!=undefined&&page!=0){
th.table.pageNumber=page;
}
if(size!=undefined&&size!=0){
th.pageSize=size;
}
var params={};
zs_post({//封装的post方法
url: '../../cs?_' + $.now(),
param:params,
success:function(r){
console.log(r)
th.table.data=r.rows;
th.table.total=r.total;
}
})
},
}