vue-element-admin table element table 自适应内容宽问题
很多情况下,我们的表头是没办法去自定义的,要从后端获取,但是element table又没办法不换行显示。。总之 就是显示的很丑
先 说第一种:如果我们的表头是从后端获取的
后端给我的数据是这样的
{"code":200,"msg":"成功",
"data":{"total":"5",
"data":[{"log_time":"log_time","os_name":"os_name"},
{"log_time":"1542818760","os_name":"android"},
{"log_time":"1542850680","os_name":"android"},
{"log_time":"1542854160","os_name":"android"},
{"log_time":"1542855780","os_name":"android"},
{"log_time":"1542858900","os_name":"android"}]}}
第一条数据是表头
但表头是不固定的,这只是列举,字段个数也是不固定的,我们用vue-element-admin的表格要重新封装
如下
sqlquery({ data: this.searchData })
.then(response => {
this.options = response.data.data
this.options2 = Object.assign(response.data.data[0], {})
this.options.shift()
this.total = Number(response.data.total)
loadingInstance.close()
})
.catch(() => {
loadingInstance.close()
})
先把数据给分开,不然在表格会多出一条数据 sqlquery是我请求的东西
在template table应该这样写
<el-table :data="options" style="width: 100%" ref="tables" border height="600" class="mt50">
<el-table-column v-for="(val, key,index) in options2" :key="index" :label="val" :render-header="labelHead">
<!-- render-header="labelHead" -->
<template slot-scope="scope">
{{scope.row[key]}}
</template>
</el-table-column>
</el-table>
重点来了,为什么我们要用 **:render-header=“labelHead”**呢。
来看看element 的解释
render-header 列标题 Label 区域渲染使用的 Function Function(h, { column, $index })
由此得知,我们的render-header是可以获取label的。这样就好办了。来看看labelHead的方法
labelHead(h, { column, index }) {
// const l = column.label.length * 2
const l = this.options[2][column.label].length
const f = 14 // 每个字大小,其实是每个字的比例值,大概会比字体大小差不多大一点,
// CminW = 0
var CminW
if (f * l < 150) {
CminW = 150
} else {
CminW = f * l
}
column.minWidth = CminW // 字大小乘个数即长度 ,注意不要加px像素,这里minWidth只是一个比例值,不是真正的长度
// 然后将列标题放在一个div块中,注意块的宽度一定要100%,否则表格显示不完全
return h('div', { class: 'table-head', style: { width: '100%' }}, [
column.label
])
},
我写了两个const l不知道有没有注意到
// const l = column.label.length * 2
因为我们公司的表格内容是比较多的,所以我会用下面的内容来获取宽度,上面的这个是标题,标题字数
const l = this.options[2][column.label].length
那就说第二种方式,就是我们已经有表格了,但每次变化宽度不一样,这就好办了。在表格最外面加 style=“width: 100%” 就可以了~~