由于表头和列是分开渲染的,通过el-table 设置fit属性,只能撑开表头,但是没有办法根据列的内容去适应宽度。网上找了一些使用根据表格内容计算表头宽度的文章,记个笔记。
代码逻辑是通过vue 的watch 监控表格的数据data,计算每列的内容和表头的最大宽度,计算的时候把表格内容使用span标签包裹,然后计算span标签的宽度width:px,然后再加上表格的内边距,
就得到了列的最大宽度.
<el-table :key="key" :data="data" v-loading="loading" style="width: 100%;" >
<el-table-column v-for="fruit in formThead"
:key="fruit.prop"
:label="fruit.label"
:width="fruit.width" <!-- 设置宽度 -->
show-overflow-tooltip>
<template slot-scope="scope">
{{ scope.row[fruit.prop] }}
</template>
</el-table-column>
</el-table>
<script>
const fields = [
{label:"ID", prop:"id"},
{label:"资产名称", prop:"asset_name"},
{label:"OA工单号", prop:"oa_jon_num"},
{label:"IP", prop:"ipaddress"},
{label:"SN号", prop:"sn"},
{label:"CPU(核)", prop:"cpu"},
{label:"内存(G)", prop:"memory"},
{label:"存储(G)", prop:"disk"},
{label:"资产类型", prop:"device_type_name"},
{label:"资产状态", prop:"device_status_name"},
{label:"所属环境", prop:"device_env_type_name"},
{label:"房间", prop:"root"},
{label:"设备用途", prop:"purpose"},
{label:"机架位", prop:"rack_position"},
{label:"U位", prop:"u_position"},
{label:"所属IDC机房", prop:"idc_name"},
{label:"设备型号", prop:"equipment_type"},
{label:"采购日期", prop:"purchase_date"},
{label:"所属系统类别", prop:"sys_name"},
{label:"所属二级产品线", prop:"second_name"},
{label:"所属物理机", prop:"parent_asset_name"},
{label:"创建时间", prop:"create_at"}
]
export default {
data() {
return {
url: "asset",
key: 1, // table key
formThead: fields, // 默认表头 Default header
data: []
};
},
methods: {
/**
* 遍历列的所有内容,获取最宽一列的宽度
* @param arr
*/
getMaxLength (arr) {
return arr.reduce((acc, item) => {
if (item) {
let calcLen = this.getTextWidth(item)
if (acc < calcLen) {
acc = calcLen
}
}
return acc
}, 0)
},
/**
* 使用span标签包裹内容,然后计算span的宽度 width: px
* @param valArr
*/
getTextWidth(str) {
let width = 0;
let html = document.createElement('span');
html.innerText = str;
html.className = 'getTextWidth';
document.querySelector('body').appendChild(html);
width = document.querySelector('.getTextWidth').offsetWidth;
document.querySelector('.getTextWidth').remove();
return width;
}
},
watch: {
/**
* 监控表格的数据data,自动设置表格宽度
* @param valArr
*/
data(valArr) {
const _this = this
this.formThead = fields.map(function (value) {
const arr = valArr.map(x => x[value.prop]) // 获取每一列的所有数据
arr.push(value.label) // 把每列的表头也加进去算
value.width = _this.getMaxLength(arr) + 20 // 每列内容最大的宽度 + 表格的内间距(依据实际情况而定)
return value
})
}
}
}
</script>
https://www.cnblogs.com/huangxiaoxue/p/12034326.html
分享到:
相关推荐
在开发中,需要表格控件根据浏览器高度进行调整,固定表头,本文主要介绍了VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法,非常具有实用价值,需要的朋友可以参考下
vue+element 设置页面表格,el-table拉动每列的宽度,并保存到localStorage里
基于 Element-UI 二次封装的支持自适应列宽的 table-column 列组件
el-table表头根据内容自适应完美解决表头错位和固定列错位 将代码复制到指令中即可使用。通过指令方式进行调用。(使用方式 <el-table v-tableFit></el-table>) 通过计算文字的宽度进行表头设置,其他内容无法...
可以让你不需要大量使用百分比或者转换之类的方法去写屏幕自适应大小,而是可以用部分px直接写css定死,通过屏幕大小改变对应等比例缩放,达到屏幕适配效果 为了让大家直观的看到所有的代码,所以结构方法等就不分...
主要介绍了vue中获取滚动table的可视页面宽度,调整表头与列对齐(每列宽度不都相同),需要的朋友可以参考下
前言 示例版本为 Element-ui 2.13.1 + Vue 2.6.11 本人是做后台开发的,由于公司业务要求需要将前后台模块进行分离,两年...Element-UI 中的 el-table 提供了设置高度的选项,在代码中设置 height 属性就可以现在表格
改变table的列宽度,可以拖拽的td表格,表格内文字只显示一行,超过的部分自动隐藏
1、echarts图表的类型是动态的,类型用柱状图展示,合计用折现图展示。2、下面表格对应的月份跟类型是动态的,从后台数据库获取,当查询条件只展示7个月的...4、监听左侧菜单栏是否展开,解决菜单展开关闭时图表自适应
vue-echarts-element-stylus 一. 高度封装的elemnet表格组件: (0)表头通过参数通过json遍历 (1)自定义渲染表头,排序,提示tips。 (2)高度封装el-table-column,可自定义列数据,一列展示多个数据 (3)固定...
3.在开发的过程中,我们经常会使用到 element中的table,但是我们也发现了在table的配置中,只能设置 具体的高度不能设置百分比,怎么实现table高度自适应呢?方法如下: 4.在对应的vue模板中添加如下代码: <el data=...
主要介绍了vue使用rem实现 移动端屏幕适配的相关知识,通过实例代码介绍了vue用rem布局的实现代码,需要的朋友可以参考下