el-table中的el-table-column设置为不显示
时间: 2023-12-07 11:39:42 浏览: 43
可以通过设置`el-table-column`的`show-overflow-tooltip`属性为`false`来实现不显示。具体操作如下所示:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄" show-overflow-tooltip="false"></el-table-column>
</el-table>
```
其中,`prop`属性表示该列对应数据的字段名,`label`属性表示该列的表头名称,`show-overflow-tooltip`属性表示是否显示单元格内容的 tooltip,将其设置为`false`即可实现不显示。
相关问题
el-table-column设置为不显示
要将 `el-table-column` 设置为不显示,可以使用 `show` 属性来控制列的显示与隐藏。将 `show` 属性设置为 `false`,即可隐藏该列。
例如,以下是一个示例代码:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄" :show="false"></el-table-column>
<el-table-column prop="gender" label="性别"></el-table-column>
</el-table>
```
在上述代码中,`el-table-column` 的 `show` 属性被设置为 `false`,因此该列(年龄)将不会显示在表格中。
el-table设置el-table-column宽不起作用
在 Element UI 中,如果需要设置 `el-table-column` 的宽度,可以通过以下几种方式实现:
1. 使用 `width` 属性
在 `el-table-column` 上设置 `width` 属性即可改变列宽度。例如:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" width="200"></el-table-column>
<el-table-column prop="age" label="年龄" width="100"></el-table-column>
</el-table>
```
2. 使用 `min-width` 和 `max-width` 属性
可以使用 `min-width` 和 `max-width` 属性来设置列的最小和最大宽度。例如:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" min-width="100" max-width="300"></el-table-column>
<el-table-column prop="age" label="年龄" min-width="50" max-width="100"></el-table-column>
</el-table>
```
3. 使用 CSS 样式
还可以通过在 `el-table-column` 上设置 `class-name` 属性来自定义样式,并通过 CSS 设置列宽度。例如:
```html
<el-table :data="tableData">
<el-table-column prop="name" label="姓名" class-name="custom-column"></el-table-column>
<el-table-column prop="age" label="年龄" class-name="custom-column"></el-table-column>
</el-table>
<style scoped>
.custom-column {
width: 200px;
}
</style>
```
如果以上方法都无法解决您的问题,建议检查一下是否有其他 CSS 样式或 JavaScript 代码影响了表格列的宽度。另外,也可以尝试更新 Element UI 的版本或者在 Element UI 的 GitHub 上提出 issue 寻求帮助。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)