antd design vue：a-dropdown在列表中同时传当前行数据和选中的key值

于 2024-03-18 15:13:07 发布
阅读量669 收藏 6
点赞数 11
文章标签： 前端 anti-design-vue vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39032149/article/details/136810056
版权

写法如下：
在这里插入图片描述
data return里的数据
在这里插入图片描述
rec为table当前行的数据，key是选择的内容key值

·亦复何言
关注
  • 11
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-antd-admin：:ant:Ant Design Pro与Vue的实施
02-06
简体中文|Vue Antd管理员的Vue实现版本开箱即用的中后台前端/设计解决方案多种主题模式任选：预览地址： : 使用文档： : 常见问题： ://iczer.gitee.io/vue-antd-admin-docs/start/faq.html国内知名： ://gitee....
antdPro在table表格使用Dropdown下拉菜单，并拿到列表数据
blueSkyBoy2850的博客
11-24 1946
antdpro使用table的Dropdown下拉菜单操作行数据
antd Select组件 和 Dropdown组件 踩坑·记
青蛙king的博客
03-16 5336
1、Select组件，展开下拉框后，滑动滚轮，下拉框会跟着上下滑动 解决： <Select getPopupContainer={trigger => trigger.parentNode} > 2、Select组件，上下滑动下拉框里的数据，数据自动变了 解决： ...
基于AntDesignVue的自定义Dropdown下拉选择组件
CoreCmd的博客
01-29 5365
组件效果 组件代码 <template> <a-dropdown :trigger="[trigger]"> <div class="dropdownTitle"> <span v-text="defaultText"/> <a-icon type="down" /> </div> <a-menu slot="overlay"
antd Dropdown动态加载数据
sappmis的博客
03-25 2108
antd Dropdown组件动态加载数据，主要为在子菜单下循环添加，第一个sapn元素为固定的表头。先来看看模板写法， <a-dropdown> <span class="action ant-dropdown-link user-dropdown-menu"> <a-avatar size="small" icon="user" /> <span>{{ org.orgName }}</span
antd 表格嵌套表格_react+antd表格操作列加Dropdown和menu写法
weixin_35171513的博客
01-05 822
需求：表格的每行操作里，有一个Dropdown组件，里面是menu组件，这里在列进行渲染的时候，把行数据传给menu,menu被点击的时候获取到行数据进行弹框展示效果图展示代码分析：1、表格的列渲染操作列的时候，Dropdown的api里有overlay属性，这个里是menu标签，我这里用的bind方法绑定，并且把行数据传给下拉框，然后menu组件就可以获取到行数据{ title: '操作...
Dropdown 下拉菜单实现标签页的相关操作
qq_36437172的博客
11-18 1517
Dropdown 组件是向下弹窗列表。点击或移入触电，会出现一个下拉菜单，可以在列表中进行选择，并执行相应的命令。
antd-mobile-vue:antd-mobile的vue实现
05-17
mobile的绝大部分组件部分组件的示例已和 ant design mobile 官网同步与antd-mobile的组件对比antd-mobile 共有 47个组件，本项目截至现在移植了44个, 组件完成度达到95%另外新增组件组件名称用途Chart图表组件与ant...
vue-antd-pro:vue + ant-design-vue创建后台管理系统模板
03-11
欢迎来到vue-antd-pro :waving_hand: 基于vue-cli3和构建的后台管理系统模板，使用json-server做数据模型。 安装依赖 安装前端依赖 yarn 安装数据mock依赖 cd server yarn 运行 运行数据mock服务 // enter server ...
ant-design-vue-pro：像Pro一样使用Ant Design Vue！
02-05
蚂蚁设计Vue Pro 适用于企业应用程序的即用型UI解决方案，作为Vue样板。 基于 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： 总览 环境和依赖 节点 纱 网络包 埃斯林特 @ vue / cli〜3 -Vue...
react-ant-dropdown-menu:下拉菜单+基于antd的菜单
03-06
React物下拉菜单下拉菜单基于antd。安装npm install -S @jswork/react-ant-dropdown-menu特性姓名类型必需的默认描述班级名称细绳错误的-- menuOptions 形状错误的--用法导入css @import " ~@jswork/react-ant-...
AntDesignVue动态创建下拉菜单
未来的路在脚下
11-17 2623
AntDesignVue动态创建下拉菜单
Dropdown下拉菜单（antd-design组件库）简单用法和禁用菜单
最新发布
我都博客
11-29 1636
·用于收罗一组命令操作。 ·Select 用于选择，而 Dropdown 是命令集合。
(vue)Dropdown的使用：操作按钮汇总
nyf_unknow的博客
06-06 1179
(vue)Dropdown的使用：
Ant Design pro of vue如何使用a-list的分页设置
m0_52513940的博客
10-29 2487
在代码中找到图片中的这个位置，写一个pagination来动态配置a-list的pagination分页。在data的return 中设置pagination的配置。
合格前端系列第二弹-Vue组件开发续篇
weixin_33946605的博客
04-30 92
2019独角兽企业重金招聘Python工程师标准>>> ...
Ant Design Vue 下拉框输入框 可以输入 可以查询
Java&Develop的博客
08-10 2918
Ant Design Vue 下拉框 可以输入 可以查询
实现 DropDownList的CheckBox多选
赵静的专栏
12-25 2468
1.css文件         .DivClose         {             display: none;             position: absolute;             width: 250px;             height: 220px;             border-style: solid;            
Antd design vue中a-switch如何在表格中动态修改值
06-06
在 Ant Design Vue 中，可以通过在表格的列定义中利用 `scopedSlots` 自定义表格列的渲染方式。具体来说，可以在 `scopedSlots` 中定义一个包含 `<a-switch>` 的自定义模板，并且将表格行数据绑定到该模板中。这样，每次表格渲染时，就会根据行数据动态渲染 `<a-switch>` 组件，并且可以根据用户的操作动态修改行数据中的对应属性值。 以下是一个简单的示例代码： ``` <template> <a-table :columns="columns" :data-source="dataSource"> <template #switch="scope"> <a-switch v-model="scope.row.enabled" @change="handleChange(scope.row)" /> </template> </a-table> </template> <script> export default { data() { return { columns: [ { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Enabled', key: 'enabled', scopedSlots: { customRender: 'switch' } } ], dataSource: [ { name: 'John Doe', enabled: true }, { name: 'Jane Smith', enabled: false } ] } }, methods: { handleChange(row) { console.log(`Switch value changed for row ${row.name}: ${row.enabled}`) // You can perform other actions here, such as making an API call to update the row data } } } </script> ``` 在这个示例中，我们定义了一个包含 `<a-switch>` 的自定义模板 `switch`，并且将其绑定到表格列的 `scopedSlots` 中。在该模板中，我们使用 `v-model` 指令将 `<a-switch>` 绑定到当前行数据中的 `enabled` 属性，并且定义了一个 `@change` 事件处理函数 `handleChange`，以便在用户修改开关状态时进行相应的处理。最后，我们将表格的列定义为一个包含开关模板的自定义列，并将数据源设置为一个包含两个对象的数组。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值