vue用ant design中table表格,点击某行时触发的事件操作

使用customRow 设置行属性,写对应事件

:customRow="rowClick"

然后在data里面写

rowClick: record => ({
  // 事件
  on: {
   click: () => {
   // 点击改行时要做的事情
   // ......
   console.log(record, 'record')
   }
  }
  })

在官方文档中也写的很清楚

补充知识:Ant-Design-Vue table 合并单元格,并且添加点击事件

点击行,有一个customRow。可以配置点击事件。

单元格的自定义分为两种方式。

一种是:通过template标签。

html部分

// text为dataIndex中的值,data为行数据,index为索引值
<template slot="xxx" slot-scope="text,data,index">
{{text|xxxFormat}}
</template>

js部分

//table的columns设定,customRender对应着html中的slot值
columns = [
 { title: "列名", dataIndex: "aaa", scopedSlots: { customRender: 'xxx' }},
]

一种是:customRender。下面给出来的是合并单元格的一段代码。

vm.columns = [
 {
  title: "列名", dataIndex: "aaa",
  customRender: (text, row, index) => {
   var obj = {
    children: text,
    attrs: {}
   }
   if (index % 2 == 0) {
    obj.attrs.rowSpan = 2;
   } else {
    obj.attrs.rowSpan = 0;
   }
   return obj;
  }
 },
];

在合并单元格的代码中可以看出。obj实际上操作的是td的相关属性。children中的内容是放在td中的。这个内容就类似于上面的template。因为能操作td以及内部的内容,所以这种方法的灵活性更加高。对于单元格合并这种操作来说,只能通过customRender来了。

虽然官方给了很多在table中添加a标签的例子,不过都没有对点击事件填写相应的方法调用。

如果只是简单的点击事件,可以通过简单地template调用点击事件。也可以方便的传参数。

<template slot="xxx" slot-scope="text,data,index">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="clickMe">你点我呀</a>
</template>

知识点,来了,如果是合并单元格里面添加点击事件呢?

第一次 尝试

customRender: (text, row, index) => {
 var obj = {
  children: <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" click='cityClick(text)'>{text}</a>,
  attrs: {}
 };
 if (index % 2 == 0) {
  obj.attrs.rowSpan = 2;
 } else {
  obj.attrs.rowSpan = 0;
 }
 return obj;
},

自己写的时候,心里就觉得别扭,click='cityClick(text)'这个地方值能传进去么?

试了下,呵呵哒,方法都不好使,也不报错。。

第二次尝试,借鉴下customRow

customRender: (text, row, index) => {
 var obj = {
  children: <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{text}</a>,
  attrs: {},
  on: {
   click: () => {
    this.$message.info(text);
   }
  }
 };
 if (index % 2 == 0) {
  obj.attrs.rowSpan = 2;
 } else {
  obj.attrs.rowSpan = 0;
 }
 return obj;
},

写完之后,自我感觉还是不错的,试一下。

不动如山。。。

第三次尝试,祭出大杀器 vue-jsx

children不能简简单单的写个<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{text}</a>,得给他翻译翻译

虚拟DOM不错的样子

var vm = this;
const columns = [
 { title: 'Name', dataIndex: 'name' },
 {
  title: 'City',
  dataIndex: 'city',
  customRender: (text, row, index) => {
   var child = vm.$createElement("a", {
    domProps: {
     innerHTML: text
    },
    on: {
     click: function () {
      vm.cityClick(text);
     }
    }
   });
   var obj = {
    children: child,
    attrs: {},
   };
   if (index % 2 == 0) {
    obj.attrs.rowSpan = 2;
   } else {
    obj.attrs.rowSpan = 0;
   }
   return obj;
  },
 },

再单独把实现方法拿出来

var child = vm.$createElement("a", {
 domProps: {
  innerHTML: text
 },
 on: {
  click: function () {
   vm.cityClick(text);
  }
 }
});

看看效果

完美~~~

以上这篇vue用ant design中table表格,点击某行时触发的事件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • ant design vue嵌套表格及表格内部编辑的用法说明

    实现效果: 因为pro手脚架中封装的s-table不支持expand和expandedRowsChange事件,无法实现根据展开节点获取其内部数据的需求,因此直接使用a-table组件 表格外层可以翻页,查询携带页码参数 <a-table size="default" rowKey="dict_id" //根据自己数据内部关键针设定 ref="table" @expandedRowsChange="expandedRowsChan

  • Ant design vue table 单击行选中 勾选checkbox教程

    最近了解Ant design 设计table 单击行选中checkedbox功能,相比于element的 @row-click 再触发toggleRowSelection,ant design的api就没那么清晰了,言归正传 期望:Ant design table 单击行选中 勾选checkedbox 实现: 单选: onClickRow(record) { return { on: { click: () => { let keys = []; keys.push(record.id); th

  • Vue根据条件添加click事件的方式

    需求:根据特定条件,增加或者去掉click事件(例如:clickFlag == true时,添加click事件:clickFlag == false时,去掉click事件:) 解决方法: 方式一:在绑定事件中直接添加标示量clickFlag <div @click="clickFlag && addGoodsHandler()"> 添加产品 </div> 方式二:用v-if .v-else-if.v-else 判断 <div v-if=&q

  • vue用ant design中table表格,点击某行时触发的事件操作

    使用customRow 设置行属性,写对应事件 :customRow="rowClick" 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record') } } }) 在官方文档中也写的很清楚 补充知识:Ant-Design-Vue table 合并单元格,并且添加点击事件 点击行,有一个customRow.

  • ant design中实现table的表格行的拖拽

    前言: 首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的 完全没有思路,   然后就打开官网的文档进行观看.一开始准备写 打开官网的一个文档是4.0的 看起来也是一脸的蒙蔽,接着找到3的一个文档,接下来直接说说如何让实现当前这个功能上代码 代码部分: import { Table } from 'antd'; import { DndProvider, DragSource, DropTarget } from 'react-dnd'; import { HTML5Backend } fr

  • 使用Vue+Django+Ant Design做一个留言评论模块的示例代码

    1.总览 留言的展示参考网络上参见的格式,如掘金社区: 一共分为两层,子孙留言都在第二层中 最终效果如下: 接下是数据库的表结构,如下所示: 有一张user表和留言表,关系为一对多,留言表有父留言字段的id,和自身有一个一对多的关系,建表语句如下: CREATE TABLE `message` ( `id` int NOT NULL AUTO_INCREMENT, `date` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, `content` text

  • 解决ant Design中Select设置initialValue时的大坑

    我出现的问题:例如在编辑活动关联红包的时候,需求是select显示的是红包名称,但是表单提交的时候是红包ID:设置默认值的initialValue为Id的时候,会出现显示是id (需要的是显示名称):如果设置默认值initialValue是名称,那么下一步操作会出现报错 但是我还有一种情况:某个活动关联的红包被删除了,在Select中的可供选项中redPackets没有这个红包的时候,显示的会是红包id,而不是红包名称 错误效果图: 期待正确效果图 解决方案:在默认值的后面加上一个空字符串进行转

  • ant design的table组件实现全选功能以及自定义分页

    我就废话不多说了,大家还是直接看代码吧~ ant design的table组件实现全选功能以及自定义分页 直接附上全部代码以及截图了 import './index.scss'; import React from 'react'; import {Checkbox, Table, Popconfirm} from 'antd'; class TestComponent extends Component { constructor (props) { super(props); this.st

  • Ant Design的Table组件去除

    在Ant Design的Table组件文档中,排序有三种状态:点击升序.点击降序.取消排序.一般需求只需要升序和降序,不需要取消排序,这时候就需要我们设置sortOrder来去除取消排序. 首先,我们从官方文档中ctrl+c出一个排序栗子,放在我们的组件中. 官方栗子 import React, { useEffect, useState } from 'react'; import { Table } from 'antd' export default () => { const [data

  • 解决ant Design中this.props.form.validateFields未执行的问题

    在使用ant Designd的 form 组件时发现点击提交方法中 this.props.form.validateFields((err, values) => {}) 部分未执行,也没有报错. 原因: 我使用了自定义校验 validator ,在自定义校验方法中有个错误,使用了未定义的变量. 注意: 1.使用validator 时,注意自定义方法中是否有错误:对于如何解决没有错误提示,官网提示:可以选择通过 async 返回一个 promise 或者使用 try...catch进行错误捕获,

  • 关于Element-ui中Table表格无法显示的问题及解决

    目录 Element-ui中Table表格无法显示 1.准备工作 2.引用Element-ui官方文档中的Table表格代码 3.启动端口,并在浏览器访问 Element-ui表格不生效问题 原因是 Element-ui中Table表格无法显示 今天项目中需要用到表格,于是就采用了由饿了么前端团队开发的Element-ui + Vue组合. 1.准备工作 使用命令:cnpm i element-ui -S 进行安装Element-ui,安装好了之后,进行如下配置: 这样操作之后,就可以使用Ele

  • vue如何将v-for中的表格导出来

    一.需要安装以下依赖 npm install -S file-saver xlsx npm install -D script-loader 二.项目中新建一个文件夹:(vendor---名字任取) 里面放置两个文件Blob.js和 Export2Excel.js. 三.在.vue文件中      写这两个方法:其中list是表格的内容 //export2Excel是你点击导出所绑定的方法名 export2Excel() { require.ensure([], () => { const {

  • element-ui中Table表格省市区合并单元格的方法实现

    本文介绍了element-ui中Table表格省市区合并单元格的方法实现,分享给大家,具体如下: 效果如图 代码如下: <template> <div> <el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form-item label="搜索"> <el-input v-mod

随机推荐