el-table 表格列宽自适应
在Element UI中,可以通过设置el-table
的fit
属性来让列宽自适应。此外,如果需要对某列进行特定的宽度设置,可以使用width
属性。
下面是一个简单的例子,展示如何使用el-table
实现列宽自适应:
<template>
<el-table
:data="tableData"
style="width: 100%"
fit
>
<el-table-column
prop="date"
label="日期"
width="180"
></el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180"
></el-table-column>
<el-table-column
prop="address"
label="地址"
></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '李小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '赵小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '孙小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
在这个例子中,fit
属性让el-table
的列宽自适应,会根据表格的宽度和列的内容来调整列宽。如果不设置width
属性,那么除了设置宽度的列之外,其他列的宽度将会根据内容自适应。如果需要固定某列的宽度,可以使用width
属性指定具体的宽度值。
评论已关闭