element UI 获取列的宽度
时间: 2023-10-26 22:17:55 浏览: 37
在 Element UI 中,你可以使用 `width` 属性来设置表格列的宽度。如果需要获取某一列的宽度,可以使用 `$refs` 属性来获取表格实例,并通过 `this.$refs.tableName.$el.querySelectorAll('th')` 获取表头列的 DOM 元素,然后通过 `getComputedStyle` 方法获取实际渲染宽度。
以下是一个示例代码:
```html
<template>
<el-table ref="table" :data="tableData" style="width: 100%">
<el-table-column prop="name" label="Name" width="150"></el-table-column>
<el-table-column prop="age" label="Age" width="150"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ name: 'John', age: 22 },
{ name: 'Jane', age: 28 }
]
}
},
mounted() {
const ths = this.$refs.table.$el.querySelectorAll('th')
const nameWidth = getComputedStyle(ths[0]).width
const ageWidth = getComputedStyle(ths[1]).width
console.log('Name column width:', nameWidth)
console.log('Age column width:', ageWidth)
}
}
</script>
```
在这个示例中,我们使用 `$refs` 获取了表格实例,并通过 `querySelectorAll` 获取了表头列的 DOM 元素。然后,我们使用 `getComputedStyle` 获取了实际渲染宽度,并将它们输出到控制台中。