文 / 景朝霞
公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
公号首发,请监督我完成1篇/周
描述
在使用iview的组件Table表格时,有固定列,表格列宽不等。
在表格平铺时,不能自适应宽度。
问题
每个列有需要设置的宽度,有固定的列,很难调整某一列的宽度为刚刚好的。此时需要某一列自适应宽度。
解决
<template>
<Table ref="testTable" border :columns="columns" :data="data"></Table>
</template>
<script>
export default {
data () {
return {
columns:[
{
title: 'Show',
key: 'show',
width: 100
},
{
title: 'Weak',
key: 'weak',
width: 250
},
{
title: 'Signin',
key: 'signin',
width: 100
},
{
title: 'Click',
key: 'click',
width: 300
},
{
title: 'Active',
key: 'active',
width: 150
},
{
title: '7, retained',
key: 'day7',
width: 150
},
{
title: '30, retained',
key: 'day30',
width: 150
},
{
title: 'The next day left',
key: 'tomorrow',
width: 150,
fixed:'right'
},
],
data: this.mockTableData2(),
}
},
mounted () {
// 计算宽度
this.columns=this.setTableBlankColumnsWidth(
{
tableObj:this,
ref:'testTable',
columns:this.columns,
focusKey:'day7'
}
);
},
methods:{
/**
* 模拟 数据
*/
mockTableData2 () {
let data = [];
function getNum() {
return Math.floor(Math.random () * 10000 + 1);
}
for (let i = 0; i < 10; i++) {
data.push({
name: 'Name ' + (i+1),
fav: 0,
show: getNum(),
weak: getNum(),
signin: getNum(),
click: getNum(),
active: getNum(),
day7: getNum(),
day30: getNum(),
tomorrow: getNum(),
day: getNum(),
week: getNum(),
month: getNum()
})
}
return data;
},
/**
* 设置表头的宽度
* @returns {Array}
*/
getColumns(){
let _columns=[];
_columns=this.setTableBlankColumnsWidth(
{
tableObj:this,
ref:'testTable',
columns:this.columns,
focusKey:'day7'
}
);
return _columns;
},
/**
* 2018年9月28日10:39:11
* @author pink-pink
* @describe 此方法可以作为公共方法调用,此处为了方便直接写在这里了。
* 处理表格空白问题
* 1. 获取到表格的宽度 tableClientWidth
* 2. 所有列宽的和(CheckBox、序号、操作列等都计算在内) columnsWidthSum
* 3. 自适应的列是,action 前面的列,即最后一个表格内容列 focusColumnKey
* 4. columnsWidthSum<=tableClientWidth
*
* params tableObj 有表格组件的 this
* params ref 表格的refName
* params columns 表格的所有的列
* params focusKey 指定放宽的列(没有此参数。默认是右侧固定列前面那个列)
* @returns {Array}
*/
setTableBlankColumnsWidth(json){
let tableObj=json.tableObj || {};
let columns=json.columns || [];
let tableClientWidth=tableObj.$refs[json.ref] ? tableObj.$refs[json.ref].$el.clientWidth : 0;
let columnsWidthSum=0;
let otherColumnWidth=0;
let focusColumn={};
let focusColumnWidth=0;
let focusIndex=-1;
// 3. 操作列前面的表格内容列
if(json.focusKey)
{
// 有指定目标key
columns.forEach((column, columnIndex)=>{
if(column.key==json.focusKey)
{
focusColumn=column || {};
focusColumnWidth=focusColumn.width ? Number(focusColumn.width) : 0;
focusIndex=columnIndex;
}
});
}
else
{
focusIndex=columns.length-2;
focusColumn=columns[focusIndex] || {};
focusColumnWidth=focusColumn.width ? Number(focusColumn.width) : 0;
}
// 2. 获取到,所有列宽的
columns.forEach((column, columnIndex)=>{
columnsWidthSum+=Number(column.width);
});
// 拿到其他列的和
otherColumnWidth=columnsWidthSum-focusColumnWidth;
// 4. 计算
if(columnsWidthSum<=tableClientWidth)
{
columns[focusIndex] && (columns[focusIndex].width=tableClientWidth-otherColumnWidth);
}
return columns;
}
}
}
</script>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。