element-ui table 以bootstrap-table 类似列表配置格式进行开发

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;
                }
            })
        },

}