IView 使用Table组件时实现给某一列添加click事件

通过给 columns 数据的项,设置一个函数 render,可以自定义渲染当前列,包括渲染自定义组件,它基于 Vue 的 Render 函数。

render 函数传入两个参数,第一个是 h,第二个是对象,包含 rowcolumn 和 index,分别指当前单元格数据,当前列数据,当前是第几行。

代码:

    render: (h, params) => {
                 //return h(‘定义的元素‘,{‘元素的性质‘},‘元素的内容‘);

                   let url = ‘访问的地址‘
                   return h(‘a‘, {
                          attrs: {
                                    href: url,
                                    target: ‘_black‘
                                }
                    }, params.row.address);
      }

了解 render 函数传入的两个参数官网详细地址:https://www.iviewui.com/components/table

原文地址:https://www.cnblogs.com/oukele/p/10013626.html

时间: 2024-08-10 05:17:15

IView 使用Table组件时实现给某一列添加click事件的相关文章

iview的table组件中加入超链接组件,可编辑组件,选择组件,日期组件

这篇文章主要介绍了iview的table组件中使用选择框,日期,可编辑表格,超链接等组件. 1.select选择组件 // tableColumn数组响应对象需要传入一个固定的option数组,如果该数组是异步动态生成的该组件不能正常渲染,因为在获取option数组之前table渲染时option是undefined. supportSelect(item) { item.render = (h, params)=>{ return h('Select', { props: { value: p

iview修改table组件实现循环向上滚屏

前提,最近项目中需要实现table的滚屏效果,并且使用的是iview的table组件,踩坑,填坑如下. 1.首先找到Table组件中的table,就是这个class:ivu-table-body template部分代码 1 div class="headcol" > 2 <Table border :columns="columns7" :data="data6" ></Table> 3 </div>

iview 在Table组件render 中使用Poptip组件 阿星小栈

render: (h, params) => { return h('div', [ h('Button', { props: {type: 'error', size: 'small'}, },[ h('Poptip', { props: { confirm: true, transfer: true, placement: 'left-end', title: '确定要删除吗!', type: 'error', size: 'small', width: '300', }, on: { 'o

React中使用Ant Table组件

一.Ant Design of React http://ant.design/docs/react/introduce 二.建立webpack工程 webpack+react demo下载 项目的启动,参考 三.简单配置 1.工程下载下来之后,在src目录下新建目录“table”,新建app.js,内容如下. import React from 'react'; import ReactDOM from 'react-dom'; import ExampleTable from './Exam

Ant Table组件

http://www.cnblogs.com/hujunzheng/p/5689650.html React中使用Ant Table组件 v一.Ant Design of React http://ant.design/docs/react/introduce v二.建立webpack工程 webpack+react demo下载 项目的启动,参考 v三.简单配置 1.工程下载下来之后,在src目录下新建目录“table”,新建app.js,内容如下. import React from 're

iview Table组件使用过滤器时无法加载表头解决办法

title: iview Table组件使用过滤器时无法加载表头解决办法 date: 2018-10-01 15:08:50 tags: JavaScript 前端 vue iview 所遇到的问题 使用iview搭建社团用人员管理时,Table组件的columns中filters属性设置为Vue data 中的另一个对象 如下: data() { groupFilter: [], memberCol: [ { title: "组别", render: (h, params) =>

关于MUI v0.18.0版本 Table组件里的复选框不能选的解决方案

前段时间在用MUI的时候,Table组件出现复选框不能选的bug(描述: 点击复选框,点击事件会触发,复选框勾选状态无变化). 解决方法: 用CheckBox组件代替Table组件自带的复选框. 解决思路: 1.将CheckBox分为两种,一种是表头里的全选框(以下称全选框),一种是列表行里普通的复选框(以下称普通框): 2.将普通框进行单独封装(原因: 1.便于单个普通框自己管理自己的勾选状态,2.当全选框的勾选状态发生变化时,可以通过props将全选框的状态赋给它,从而实现全选的功能): 关

vue.js table组件封装

table组件 和 分页组件来自iview,在这里我根据公司业务再次做了一次封装,使用slot进行内容分发,可以随意放置input输入框和button按钮 ,再使用props向子组件传递参数,使用emit属性向父组件传递事件,代码如下 <子组件> <template> <div style=""> <div class="search-bar run-search-bar" style="background:no

页面中使用多个element-ui upload上传组件时绑定对应元素

elemet-ui里提供的upload文件上传组件,功能很强大,能满足单独使用的需求,但是有时候会存在多次复用上传组件的需求,如下图的样子,这时候就出现了问题,页面上有多个上传组件时,要怎么操作呢? 之前在网上找到了一位大神的方法,修改源码,在回调函数中多加一个参数,但是这种方法在多人开发时不太适用,因为这要求所有人都要修改源码,这里附上大神的方法,大家可以酌情使用 首先在你下个包里面找到node_modules/element-ui/lib/element-ui.common.js 然后在里面