示例可以参考这具体步骤如下：

1. 使用v-table标签

<v-table ajax_url="/xmodel/list"></v-table>

2. 提供表格需要的数据与模型 ，接口对应的地址为ajax_url所配置的地址， 具体实现点这

    @GetMapping("/xmodel/list")
    @ResponseBody
    UIModel query_table_data(XModelQuery xModelQuery) throws Exception {
        TableBuilder builder = TableBuilder.newBuilder(XModel.class)
            .data(page(xModelQuery))
            .isPage(true)
            //.addColunm(new FormItem("d" , "count"))
            .totalSize(count()).hiddenColumn("myIcon") ;
        return  UIModel.success().tableData(builder.build());
    }

<v-table ajax_url="/xmodel/list" :render="render"></v-table>

例如我需要自定义展示myIcon列 ，以及列由两个列联合决定， 可以如下写 ，render放在data :{...} 属性中

render:{
    myIcon: function(row , $table) {
         return '<i class="' + row.myIcon + '"></i>'
    } ,
    casCol: function(row, $table) {
         return (row.isDaoDian? '到店'：" " ) + (row.idDaoJia?'到家' ： '')
    }
} 

首先给table绑定edit_filter属性

<v-table ajax_url="/xmodel/list" :edit_filter="edit_filter"></v-table>

methods中增加edit_filter函数， edit_filter:function(key ,row) , key为列的键，row为整行值 , 例如一下控制 key="lang"这列不可编辑 `

edit_filter:function (key , row) {
    if(key == "lang")
        return false
    return true
}

ref：给表格取个名称，可以通过 this.$refs.(tableName) 或者 this.$root.$ref.(tableName)获取到表格实例， 根据this作用域不一样进行是否需要加$root

ajax_url: 表格数据与模型接口地址 ， 可以js动态设置 table.ajax_url = 'your url' , 一般设置后可以配合table.refresh()进行刷新

table_data: 方法签名 function(data) ; data需要为一个TableBuilder构造出来的模型数据 , 如果是使用UIModel为返回

add_row: 动态添加行, function(init_data) , init_data为初始化数据，当然也可以不传 ， 基本调用方法 this.$refs.table2.add_row({name:"来电内容" , love:1}) delete_row: 删除列操作 ，function(row_number) , 需要删除的行号
edit_row： function(row_number) , 使得指定的列变成可编辑
get_value: function() ,获取表格的数据列表
fetchData(): 动态刷新table数据 如： vm.$refs.orderListConfigTable.fetchData(); orderListConfigTable 为table的ref名

on-row-selected：行选中事件 , 可在v-table标签中绑定选中事件 ,使用@on-row-selected="你的处理函数" ，处理方法声明function(index,row )， index为行号， row为该行的数据