当el-table-column的type类型为selection,背景色为透明,自定义边框颜色
时间: 2024-02-28 08:53:48 浏览: 26
可以通过设置 `.el-table__header-wrapper th.is-selection` 和 `.el-table__body-wrapper td.is-selection` 的样式来实现 `el-table-column` 的选择列背景色为透明,自定义边框颜色。具体代码如下:
```css
/* 设置选择列背景色为透明 */
.el-table__header-wrapper th.is-selection,
.el-table__body-wrapper td.is-selection {
background-color: transparent !important;
}
/* 自定义选择列边框颜色 */
.el-table__header-wrapper th.is-selection .cell,
.el-table__body-wrapper td.is-selection .cell {
border-color: #999;
}
```
上述代码中,`!important` 标记用于覆盖 `element-ui` 默认的样式。`border-color` 属性用于设置选择列的边框颜色,可以根据需要自行调整。
相关问题
el-table-column type="selection"设置背景色及边框颜色
你可以通过设置 CSS 样式来改变 el-table-column 的背景色和边框颜色。以下是一个示例:
```html
<el-table>
<el-table-column type="selection" class-name="my-selection-column"></el-table-column>
<!-- 其他列 -->
</el-table>
<style>
.my-selection-column {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
```
在这个示例中,我们给 el-table-column 加上了一个 class 名称 `my-selection-column`,并且在样式表中设置了其背景色和边框颜色。你可以根据自己的需要来调整样式。
禁用el-table-column type="selection"表头
要禁用 `el-table-column` 的选择框,可以在 `el-table-column` 标签中添加 `selectable` 属性,并将其设置为 `false`,如下所示:
``` html
<el-table-column
type="selection"
label="选择"
selectable="false">
</el-table-column>
```
这将禁用 `el-table-column` 的选择框,但仍然保留表头。如果您还要去掉表头,可以在表格组件中设置 `show-header` 属性为 `false`,如下所示:
``` html
<el-table
:data="tableData"
show-header="false">
<el-table-column
type="selection"
label="选择"
selectable="false">
</el-table-column>
<!-- 其他列 -->
</el-table>
```
这将完全隐藏表头和选择框。