Vue3.0使用el-table动态计算列表宽度
Vue3.0使用el-table动态计算列表宽度
·
注:自适应宽度根据内容展示最长的一行设定
1.在工具文件中定义计算方法
const baseWidth = 14;
// 设置表格的最大宽和最小宽
const MIN_WIDTH = 200;
const MAX_WIDTH = 350;
/**
* 列表每列的最大宽度计算
* @description 根据内容长度动态计算是否需要省略号
* @param {object[]} list- 表格的数据
* @param {string} key - 需要检测的属性
* @param {number=} min - 预定义的最小值
* @param {number=} max - 预定义的最大值
* @returns { width | min | max} 返回对应的内容的长度
*/
export function calcColumnWidth(
list = [],
key,
min = MIN_WIDTH,
max = MAX_WIDTH
) {
if (!min) {
min = MIN_WIDTH;
}
if (list.length > 0) {
const newList = [...list];
const longestItem = newList.sort((a, b) => {
return (b[key]?.length || 0) - (a[key]?.length || 0);
})[0] || { [key]: "" };
console.log('longestItem', longestItem);
const width = longestItem[key]?.length * baseWidth + 22;
return width < min ? min : width > max ? max : width;
} else {
return min;
}
};
2. 在需要使用的页面引用
3. 在table标签中使用
更多推荐
已为社区贡献3条内容
所有评论(0)