el-table-column type="selection"设置背景色及边框颜色
时间: 2023-09-25 09:12:55 浏览: 161
你可以通过设置 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>
```
这将完全隐藏表头和选择框。
vue 中 el-table-column type="selection" 具体用法
`<el-table-column>` 组件的 `type="selection"` 属性可以用于实现表格中的多选功能。具体用法如下:
1. 在 `el-table` 组件中设置 `show-checkbox` 属性为 `true`,表示显示复选框。
```html
<el-table :data="tableData" :show-checkbox="true">
<!-- 列定义 -->
</el-table>
```
2. 在 `el-table-column` 组件中设置 `type="selection"` 属性,表示该列是多选列。
```html
<el-table :data="tableData" :show-checkbox="true">
<el-table-column type="selection"></el-table-column>
<!-- 列定义 -->
</el-table>
```
这样,就会在表格中显示一个多选列,用户可以通过多选列的复选框来选择多个行数据。在表格的 `selection-change` 事件中,可以获取到当前选中的行数据。
```html
<el-table :data="tableData" :show-checkbox="true" @selection-change="handleSelectionChange">
<el-table-column type="selection"></el-table-column>
<!-- 列定义 -->
</el-table>
```
```javascript
methods: {
handleSelectionChange(selection) {
console.log(selection); // 当前选中的行数据
}
}
```