ant design vue中表格指定格式渲染方式

2023-07-13 04:48:03 88

注意点：定义的columns一定要写在data中，否则在加载过程中由于渲染顺序会导致其中的渲染函数无法识别

渲染方法1：

指定渲染函数：

constcolumns=[
{
title:'排名',
dataIndex:'key',
customRender:renderContent//渲染函数的规则
},{
title:'搜索关键词',
dataIndex:'keyword',
customRender:(text,row,index)=>{
if(index<4){//前4行数据以a标签的形式被渲染
return{text}
}
return{//否则以独占4列的文本形式被渲染
children:text,
attrs:{
colSpan:4
}
}
}
}
]
constrenderContent=(value,row,index)=>{
constobj={
children:value,
attrs:{}
}
returnobj
}

渲染方法2：

直接调用对应插槽模板：




项目进度
质量管控
运维监控



{{text}}





constcolumns=[
{
title:'编号',
dataIndex:'number',
customRender:renderContent
},{
title:'项目名称',
dataIndex:'name',
customRender:(text,row,index)=>{
return{
children:{text},
attrs:{}
}
}
},{
title:'项目进度',
dataIndex:'progress',
scopedSlots:{customRender:'progress'}//模板中对应的slot-scope可以用来传递参数，其中第一个参数是当前字段对应的值progress，第二个参数是当前字段对应的所有值对象,即整个data[n]
},{
title:'操作',
dataIndex:'operate',
scopedSlots:{customRender:'operation'}//直接对应插槽名为operation的模板
}
]

constdata=[
{
key:6,
number:6,
name:'雅典娜',
progress:'88%',
progressstatus:1
}
]

补充知识：Antdesignvue框架，table控件中customRow用法的一个坑

今天在写代码时，用到Antdesign框架中的控件，其中的一个需求是：点击table中的一行，需要执行一些操作。因为没有默认的行点击事件，需要用到customRow来进行自定义。

这个方法，在官方的文档中，有使用说明，如下：

{ return{ props:{ xxx...//属性 }, on:{//事件 click:(event)=>{},//点击行 dblclick:(event)=>{}, contextmenu:(event)=>{}, mouseenter:(event)=>{},//鼠标移入行 mouseleave:(event)=>{} }, }; )} customHeaderRow={(column)=>{ return{ on:{ click:()=>{},//点击表头行 } }; )} />

官方的这个写法，应该是属于lamada的语法，今天我在使用时，也是使用这种写法。

如下：

methods:{
getDetailList(id){
//执行具体的操作
},
rowClick:(record,index)=>({
//事件
on:{
click:event=>{
//点击该行时要做的事情
console.log('record',record)
console.log('index',index)
console.log('event',event)
this.getDetailList(record.id)//这一行会报错，报未定义
}
}
})
}

在执行时，会报错，如下：

[Vuewarn]:Errorinv-onhandler:“TypeError:Cannotreadproperty‘getDetailList'ofundefined”。

不使用lamada表达式，则不会出现这样的问题，修改后的rowClick方法如下：

rowClick(record,index){
return{
on:{
click:()=>{
console.log(record,index)
this.getDetailList(record.matbillid)
}
}
}
},

可正常执行，并能正确调用getDetailList方法

以上这篇antdesignvue中表格指定格式渲染方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

ant design vue中表格指定格式渲染方式

热门推荐

随机推荐