ag-grid去掉选中后得边框颜色
时间: 2024-03-24 21:41:28 浏览: 17
要去掉ag-grid选中后的边框颜色,可以通过修改CSS样式来实现。具体步骤如下:
1. 打开浏览器开发者工具,找到选中的表格行的CSS样式。
2. 找到CSS样式中的`:focus`伪类,将其样式设置为`outline: none !important;`。
3. 如果需要同时去掉鼠标悬停时的边框颜色,也可以找到`:hover`伪类,将其样式设置为`outline: none !important;`。
4. 保存修改后的CSS样式即可。
示例CSS代码如下:
```
.ag-row-focus {
outline: none !important;
}
.ag-row-hover {
outline: none !important;
}
```
相关问题
ag-grid表格去掉选中后得背景色
要去掉ag-grid表格选中后的背景色,可以通过CSS样式来实现。具体做法是在样式文件中添加以下代码:
```css
.ag-theme-balham .ag-row-selected {
background-color: transparent !important;
}
```
其中,`.ag-theme-balham`是表格主题的名称,如果你使用的是其他主题,则需要将这个名称替换成你所使用的主题名称。这段代码的作用是将选中行的背景色设置为透明色。
另外,如果你想要去掉选中单元格的背景色,可以添加以下代码:
```css
.ag-theme-balham .ag-cell-focus {
background-color: transparent !important;
}
```
同样地,这段代码的作用是将选中单元格的背景色设置为透明色。
ag-grid-vue 设置选中单元格的样式
可以使用 "cellStyle" 和 "cellClass" 属性来设置选中单元格的样式。
cellStyle 属性可以用来设置单元格的 inline style,例如:
```
<ag-grid-vue :columnDefs="columnDefs" :rowData="rowData" :cellStyle="getCellStyle">
</ag-grid-vue>
methods: {
getCellStyle({value, data, node, colDef, rowIndex, $event}) {
if (value === 'selected') {
return {'background-color': 'red'}
}
return null;
}
}
```
cellClass 属性可以用来设置单元格的 CSS class,例如:
```
<ag-grid-vue :columnDefs="columnDefs" :rowData="rowData" :cellClass="getCellClass">
</ag-grid-vue>
methods: {
getCellClass({value, data, node, colDef, rowIndex, $event}) {
if (value === 'selected') {
return 'selected-cell'
}
return null;
}
}
```
对应的CSS样式
```
.selected-cell {
background-color: red;
}
```
注意:需要在设置样式时判断当前单元格是否是选中状态。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)