Antd-vue中table组件的customCell用法

最新推荐文章于 2024-09-23 11:09:04 发布

S_Yueee

最新推荐文章于 2024-09-23 11:09:04 发布

阅读量1w

点赞数 2

分类专栏： vue 文章标签： vue js es6

本文链接：https://blog.csdn.net/qq_33262275/article/details/109238602

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文主要介绍了在Ant Design中使用Table组件时，如何实现自定义单元格的事件处理，包括点击、双击、右键点击、鼠标进入和离开等事件的绑定和使用。通过`customCell`属性，可以方便地为表格单元格添加各种交互功能。

摘要由CSDN通过智能技术生成

看了官方文档的用法，customRow好用，customCell怎么都不好用，后来找了好久，才找到解决办法。

直接看例子。

<a-table
  :columns="renderColumns(columns)"
  :data-source="tableData"
>
</a-table>

methods: {
  renderColumns(columns) {
    const _this = this
    return columns.map(item => {
      return {
        ...item,
        customCell(record, index) {
          return {
            click: (event) => {},
            dblclick: (event) => {},
            contextmenu: (event) => {},
            mouseenter: (event) => {},
            mouseleave: (event) => {}
          }
        }
      }
    })
  }
}