elementui表格表头不换行 vue2
时间: 2024-09-18 10:02:50 浏览: 50
vue elementUI table 自定义表头和行合并的实例代码
在Element UI的表格组件中,如果想要让表头内容不自动换行,你可以通过设置`table-header-cell`的CSS样式来控制。在Vue 2中,你可以在`.el-table th`选择器下添加一个`:white-space`属性,将其值设为`nowrap`或者`pre`,以禁止文本自动换行。
示例代码如下:
```html
<template>
<el-table :data="tableData">
<el-table-column prop="name" label="Name" :header-align="center" :width="180" :formatter="handleFormatter"></el-table-column>
<!-- 更改表头样式 -->
<el-table-column label="Description">
<template slot-scope="scope">
<span v-bind:class="{ noWrap: true }">{{ scope.$index + 1 }}. {{ scope.row.description }}</span>
</template>
</el-table-column>
</el-table>
</template>
<style scoped>
.el-table th.noWrap {
white-space: nowrap; /* 或者 pre 如果需要保持原样显示 */
}
</style>
<script>
export default {
data() {
return {
tableData: [
{ name: 'Item 1', description: 'This is a long string that should not wrap.' },
// ...
],
handleFormatter(value) {
return value;
}
};
}
};
</script>
```
在这个例子中,我们通过`:class="{ noWrap: true }"`动态地给每个表头单元格添加了一个名为`noWrap`的类,然后在CSS中设置了这个类的`white-space`属性为`nowrap`。
阅读全文