《Vue.j实战》一书 p171 练习1 试做

练习1 ： 查阅资料，了解表格的＜colgroup＞和＜col＞元素用法后，给v-table 的columns 增加一
个可以设置列宽的width 宇段，并实现该功能。

解答：

Demo在线效果浏览

app.vue文件：

在columns中添加　width 字段，如下：之所以以百分比来设置此字段，是因为在初始设置中，表格的width是设置为 100％ 的，故此。

      columns:[
        {
          title:'姓名',
          key:'name',
          width:'15%'
        },
        {
          title:'年龄',
          key:'age',
          sortable:true,
          width:'15%'
        },
        {
          title:'出生日期',
          key:'birthday',
          sortable:true,
          width:'30%'
        },
        {
          title:'地址',
          key:'address',
          width:'40%'
        }
      ],

在table.vue中，在 render 函数中，添加如下代码：

        var cols=[];
        this.currentColumns.forEach((col,index)=>{
            cols.push(h('col',{
                style:{
                    width:col.width
                }
            }))
        });

        return h('table',[
            h('colgroup',cols),
            h('thead',[
                h('tr',ths)
            ]),
            h('tbody',trs)
        ])