vue + Ant Design之table自定义表格、添加操作按钮并获取当前行数据

简介: vue + Ant Design之table自定义表格、添加操作按钮并获取当前行数据

目录

踩坑经历

正确教程

第一步创建表格

第二步引用数据

第三步获取对应行的数据

最后效果图


踩坑经历

今天搞了一下午可算搞懂了,网上我查了好多资料发现好像有点老了都

比如这种的:

<template slot="action" slot-scope="text,record">
        <a slot="action"  href="javascript:;" @click="onUser(record)">用户</a>
        <a slot="action"  href="javascript:;" @click="onRole(record)">权限</a>
</template>
<script>
 columns: [
        {
          dataIndex: "checklistName",
          key: "checklistName",
          id: "1",
          title: this.$t("table.ChecklistName"),
          width: 150,
          fixed: "left",
          scopedSlots: { customRender: "name" },
        },]
</script>


slot、slot-scope、scopedSlots这几个关键的元素好像是无效的,而且我查询文档发现都没有scopedSlots这个方法了,应该是废弃了,所以可见网上好多方法都是无效的,我就是特地来解救大家的,哈哈哈!废话先说到这,我们开搞:


正确教程

第一步创建表格

注意#name是创建的插槽名称,标签内放自己想展示的内容,可以放按钮,图片,任何你想放的元素(#是创建插槽,name是自己定义的插槽名称)


 <a-table :columns="columns" :data-source="data">//:columns列,描述数据对象
      <template #name="{ record }">              //:data数据
     <a-button type="primary" ghost @click="hide(record)">编辑</a-button>
      </template>
</a-table>
//record是固定写法,记住不能变,以后获取行信息用


第二步引用数据

注意是:columns绑定的数据里,写上slots属性,然后通过customRender绑定即可

1.const columns = [
  {
    title: "查看",
    key: "查看",
    dataIndex: "key",
    align: "center",
    slots: { customRender: "name" },//绑定插槽
  },]

第三步获取对应行的数据

我这里用的是vue3写的,上面标签里record变量保存的就是行信息,这里就可以获取到了

1.const hide = (e) => {
      console.log(e);
    };

最后效果图

image.png

相关文章
|
JavaScript
vue3- antd design vue 引入iconfont
vue3- antd design vue 引入iconfont
|
JavaScript 数据格式
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
vue3 + Ant design vue formItem 无法使用嵌套的form表单校验
1395 1
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
1412 6
Vue使用element中table组件实现单选一行
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
422 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
JavaScript
Vue实现按钮级别权限
文章介绍了在Vue中实现按钮级别权限的两种方法:使用自定义Vue指令和使用v-if指令配合自定义方法。
338 4
Vue实现按钮级别权限
|
JavaScript
Vue3按钮(Button)
这是一个高度可定制的按钮组件,支持多种属性设置,包括按钮类型、形状、图标、尺寸、背景透明度、波纹颜色、跳转地址、打开方式、禁用状态、加载状态及指示符样式等。预览图展示了不同配置下的按钮样式变化。组件通过Vue实现,并提供了丰富的自定义选项以适应各种场景需求。
1183 1
Vue3按钮(Button)
Vue3表格(Table)
这是一个基于 Vue2 的表格组件,支持自定义列配置、数据绑定、加载中提示、空状态提示及分页功能。主要属性包括表格列配置 `columns`、数据源 `dataSource`、加载状态 `loading` 及分页配置等。组件内置了 Spin、Empty 和 Pagination 等子组件以实现丰富的交互效果。通过简单的属性绑定即可实现数据展示、加载动画和无数据提示等功能。
1147 0
Vue3表格(Table)
|
JavaScript
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
这篇文章介绍了在Vue中如何使用Swiper插件创建轮播图,解决Swiper左右切换按钮不生效的问题,并展示了如何将Swiper轮播图抽离成一个可复用的公共组件,同时提供了详细的安装、配置和优化建议。
在Vue中使用Swiper轮播图、同时解决点击轮播图左右切换按钮不生效的问题、同时将轮播图抽离出为一个公共组件
|
11月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
826 2
|
10月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
693 137