练习1 : 查阅资料,了解表格的<colgroup>和<col>元素用法后,给v-table 的columns 增加一
个可以设置列宽的width 宇段,并实现该功能。
解答:
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) ])