element 动态生成的表格如何给不同的列设置宽度呢?v-for el-table-column
您可以使用v-bind指令来动态设置el-table-column的宽度。在v-for循环中,您可以为每个列定义一个宽度属性,并将其绑定到el-table-column的width属性上。
以下是一个示例,展示如何根据不同的列设置表格的宽度:
<template>
<el-table :data="tableData">
<el-table-column
v-for="column in columns"
:key="column.prop"
:label="column.label"
:width="column.width"
></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
columns: [
{ label: 'Column 1', prop: 'col1', width: '100px' },
{ label: 'Column 2', prop: 'col2', width: '200px' },
{ label: 'Column 3', prop: 'col3', width: '150px' },
],
tableData: [
{ col1: 'Data 1', col2: 'Data 2', col3: 'Data 3' },
{ col1: 'Data 4', col2: 'Data 5', col3: 'Data 6' },
{ col1: 'Data 7', col2: 'Data 8', col3: 'Data 9' },
],
};
},
};
</script>
在上面的示例中,我们使用v-for循环遍历columns数组,并为每个列定义了一个width属性。这些宽度属性绑定到el-table-column的width属性上,以设置不同列的宽度。
请注意,width属性的值可以是一个字符串,用于设置固定宽度,也可以是一个数字,用于设置相对宽度(例如百分比)
原文地址: https://www.cveoy.top/t/topic/hH7l 著作权归作者所有。请勿转载和采集!