antdesign表格中加入下拉框后，鼠标移入下拉框内容后当前行白屏bug

最新推荐文章于 2024-01-16 14:06:27 发布
最新推荐文章于 2024-01-16 14:06:27 发布
阅读量247 收藏
点赞数
分类专栏： 样式效果 文章标签： css ant design
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47436633/article/details/127754965
版权

1. bug出现原因解释

  1. 这块是样式没有覆盖全面的问题，一般出现在没有自定义样式的项目中

2. 解决方案

  1. 第一种就是自定义主题方案，当然 你看到这篇文章的时候你也不会选这个处理方案了- - 因为你项目是主题覆盖模式
  2. 第二种方案，在你覆盖全局table样式的地方加入以下代码即可（umi项目一般位置就在 src/global.css 这个位置）。
.ant-table .ant-table-cell-row-hover {
  background-color: transparent!important;
}

以上css代码，是设置背景色透明度，你后面覆盖的选择颜色看你自己加。

闲鱼_JavaScript
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue+Element中table表格实现可编辑（select下拉框）
11-20
最近在工作中遇到一个问题，需要在表格中实现数据可编辑状态，具体情况是需要在单元格里加入下拉框；并且每个下拉框的数组数据是不一样的，具体是根据当前行前面数据的id查询而来，前面的是数据是动态生成的，后面的...
二级导航栏鼠标移到下面就消失问题
wangling123s的博客
08-24 710
<!DOCTYPE html> <html> <head> <style> .dropdown { position: relative; /*display: inline-block;*/ } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 160px; box-shadow: 0px 8p...
antd vue 自定义Table 行hover
weixin_43203545的博客
10-12 711
antd vue 自定义Table 行hover
antd table内容hover入tooltip背景变色
qq_36384745的博客
03-16 484
antd table内容hover入tooltip背景变色
ant design vue 在弹窗中使用下拉框导致下拉框选项显示不出来
weixin_59895180的博客
04-29 3482
ant design vue 在弹窗中使用下拉框导致下拉框选项显示不出来
Ant table表格合并单元格使用
m0_54679211的博客
10-08 3903
前端，随堂笔记吧，小笔记，不喜勿喷！仅供参考学习
在表格中实现复选框下拉框
01-24
在表格tableview中实现复选框，下拉框，最简单快速方案，中文读取乱码问题的解决方案。 本实例在QT5.12上运行通过，用最简单的方法在tableview中实现了复选框和下拉框，同时还提供了读取文本数据的方法以及在读取中...
antd多选下拉框一行展示的实现方式
01-21
我们都知道antd的select多选时，如果下拉框宽度不足，则自动浮动到下一行将下拉框撑大，但是这回影响到页面的整体布局。 我们期望的效果是，下拉框只显示一行的值，超出一行的部分自动隐藏。 下面有2种方案来实现这...
LABVIEW 表格中可输入颜色框_下拉框_选择框
05-29
例如，当用户在颜色框中选择颜色、在下拉框中做出选择或更改复选框的状态时，相应的事件会被触发，然后通过事件结构处理这些操作，更新数据并可能影响程序的其他部分。 6. **数据绑定**：自定义网格的每个单元格都...
TypeSens-Popup.rar_LabVIEW 下拉_Labview 表格_labview表格_typesens_下拉框
07-15
例如，你可以创建一个带有下拉框的表格，下拉框中的选项可以根据表格中的数据类型动态生成，用户通过下拉框选择的值可以直接写入表格，同时保证数据类型的一致性。 在"TypeSens Popup"这个压缩包文件中，很可能包含...
Ant-Design Table可编辑行增加下拉框
damahou11的博客
11-16 780
【代码】Ant-Design Table可编辑行增加下拉框。
AntDesign表格中下拉菜单
waillyer的博客
02-21 4532
表格更多操作下拉菜单 下拉点击传入key和对应行数据即可 <span slot="action" slot-scope="text, record"> <a>Invite 一 {{ record.name }}</a> <a-divider type="vertical"/> <a-popconfirm v-if="data.length" title="Sure to delete?"
antd Design Table组件中，整行触发悬浮
shihuademao的博客
12-06 2802
由于最近的需求，要求开发出一个table行触发悬浮提示框展示信息的功能，类似这样： 鼠标放入这一行，然后展示一个悬浮窗，展示本行的数据。但是，我们都知道antd的Table组件，是一列一列的设定样式和属性进行调整的（column这个API），无法像column一样固定一整行的设定样式和属性。特别是触发悬浮窗，一般都是这样，给某一列特定字段加上悬浮，显示表格中被省略的内容。这种只能由某行某个字段触发 ，无法行悬浮内容。所以在这里跟大家分享一下，利用Popver,Table行悬浮： state={
ant design包含下拉选择的行编辑表格，实用！！！
最新发布
sccscswwe的博客
01-16 1008
一下代码为行编辑代码，可直接复制运行实用，根据自身需要进行修改。
antd的下拉菜单dropdown组件，如何控制点击空白处时，二级菜单一层一层收起，且阻止页面其他点击事件
热门推荐
前端小白菜的菜园子
11-10 1万+
前言：下文中提到的下拉框、对话框以及其他UI组件都是antd UI库中的，更多操作请看antd官方文档API，点击此处跳转至antd的下拉菜单dropdown组件官网。 情景/目标：工作中遇到的需求： 1、当下拉菜单展开多层时（如下图 有二级下拉菜单展开），点击页面其他地方，只是收起二级菜单，一级菜单不收起，再次点击收起一级菜单。antd默认点击别处，展开的菜单全部收起 2、当页面中有下拉菜单展开时，点击空白处任何地方，都是收起一层下拉菜单，页面中下拉菜单全部收起后，点击、双击等操作才会出发页面.
解决：ProTable一次勾选上千条数据并分页勾选，页面卡顿问题
qq_38969618的博客
07-03 1161
【代码】解决：ProTable一次勾选上千条数据并分页勾选，页面卡顿问题。
antd-vue中的下拉选择框搜索失效的问题
Yan9_9的博客
10-21 3097
Hi,最近在开发中(vue3+TS)遇到了antd-vue中的下拉选择框，案例说看官方文档就能实现的，但是这个选择框自带了搜索功能，最后搜索功能失效。
ant design vue可编辑表格下拉框
08-31
在 Ant Design Vue 的可编辑表格中使用下拉框，可以使用 Select 组件。首先，你需要在表格的列定义中配置一个编辑器，通过 render 函数返回一个 Select 组件。 以下是一个简单的示例代码： ```vue <template> <a-table :data-source="dataSource" :columns="columns"> <!-- 其他列定义 --> <template #action="{ text, record }"> <a @click="startEditing(record.key)">编辑</a> </template> </a-table> </template> <script> import { ref } from 'vue'; import { Table, Select, Button, Popconfirm } from 'ant-design-vue'; export default { components: { Table, Select, Button, Popconfirm, }, setup() { const dataSource = ref([ { key: 1, name: 'John', age: 32, city: 'New York' }, { key: 2, name: 'Alice', age: 28, city: 'London' }, // 其他数据 ]); const columns = [ { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, { title: 'City', dataIndex: 'city', customRender: ({ text, record, index }) => { const editing = ref(false); const selectedCity = ref(record.city); const startEditing = (key) => { editing.value = true; }; const handleSave = () => { // 处理保存逻辑，比如更新数据源、发送请求等 editing.value = false; }; return editing.value ? ( <Select v-model={[selectedCity.value, 'value']}> <a-select-option value="New York">New York</a-select-option> <a-select-option value="London">London</a-select-option> <a-select-option value="Paris">Paris</a-select-option> </Select> ) : ( <span>{text}</span> ); }, }, { title: 'Action', key: 'action', customRender: ({ record }) => ( <span> <a-button type="link" onClick={() => startEditing(record.key)}> Edit </a-button> <a-popconfirm title="Sure to delete?" onConfirm={() => handleDelete(record.key)} > <a-button type="link">Delete</a-button> </a-popconfirm> </span> ), }, ]; return { dataSource, columns, }; }, }; </script> ``` 在上面的示例中，`columns` 数组定义了表格的列，其中 City 列使用了自定义渲染函数 `customRender` 来渲染下拉框编辑器。当点击编辑按钮时，下拉框会显示为可编辑状态，用户可以选择不同的选项。点击保存按钮后，可以处理保存逻辑，比如更新数据源、发送请求等。 这只是一个简单的示例，你可以根据自己的需求进行修改和扩展。希望对你有帮助！如有任何疑问，请随时询问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值