html表格怎样固定列大小,使用iview的组件 Table 表格，有固定列，设置其中一个列适应屏幕大小...

文 / 景朝霞

公号 / 朝霞的光影笔记

ID / zhaoxiajingjing

公号首发，请监督我完成1篇/周

描述

在使用iview的组件Table表格时，有固定列，表格列宽不等。

在表格平铺时，不能自适应宽度。

问题

每个列有需要设置的宽度，有固定的列，很难调整某一列的宽度为刚刚好的。此时需要某一列自适应宽度。

解决

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;

}

}

}

交流