使用表格,在配置 columns时用到了 customRender,然后就报错了

<script>
import FileName from '@/views/admin/document/FileName'
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
customRender: () => <FileName />,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: '12%'
},
{
title: 'Address',
dataIndex: 'address',
width: '30%',
key: 'address'
}
] const data = [
{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
},
{
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park'
}
]
export default {
name: 'DocumentList',
components: {
CreateForm,
NoData,
FileName
},
data() {
return {
data,
columns
}
},
computed: {},
methods: {
customRow (record) {
return {
on: { // 事件
click: () => {
console.log('点击行了')
}, // 点击行
mouseenter: () => {
console.log('鼠标移入行')
} // 鼠标移入行
}
}
}
},
created() {
}
}
</script>

报错原因, 没有把 columns放到data 里面,获取不到上下文

这样改

data() {
const columns = [...]
return {
columns
}
}
<script>
import FileName from '@/views/admin/document/FileName' export default {
name: 'DocumentList',
components: {
FileName
},
data() { const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
customRender: () => <FileName />,
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
width: '12%'
},
{
title: 'Address',
dataIndex: 'address',
width: '30%',
key: 'address'
}
] const data = [
{
key: 1,
name: 'John Brown sr.',
age: 60,
address: 'New York No. 1 Lake Park',
},
{
key: 2,
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park'
}
] return {
data,
columns
}
},
computed: {},
methods: {
customRow (record) {
return {
on: { // 事件
click: () => {
console.log('点击行了')
}, // 点击行
mouseenter: () => {
console.log('鼠标移入行')
} // 鼠标移入行
}
}
}
},
created() {
}
}
</script>

ant-design-vue 报错 ReferenceError: h is not defined的更多相关文章

  1. 使用npm安装 Ant Design Vue 时报错—ant-design-vue@latest(sha1-qsf / gCIFcRYxyGmOKgx7TmHf1z4 =)seems to be corrupted.

    安装 Ant Design Vue 时报错: npm install ant-design-vue --save ant-design-vue @ latest(sha1-qsf / gCIFcRYx ...

  2. 解决运行webpack --config webpack.dev.config.js 报错ReferenceError: _dirname is not defined

    控制台报错信息如下 将webpack.dev.config.js中的_dirname 改为 __dirname 注意这里是两个下划线谢谢!感觉好坑

  3. Vue报错——“Trailing spaces not allowed”

    在VSCode中开发Vue 报错:“Trailing spaces not allowed” 这是空格多了,删除多余的空格就可以了

  4. Ant Design Vue select下拉列表设置默认值

    在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...

  5. vue 报错 :属性undefined(页面成功渲染)

    vue 报错:Cannot read property 'instrumentId' of undefined" 相关代码如下: <template> ... <span& ...

  6. Ant Design Vue Pro 项目实战-项目初始化(一)

    写在前面 时间真快,转眼又是新的一年.随着前后端技术的不断更新迭代,尤其是前端,在目前前后端分离开发模式这样的一个大环境下,交互性.兼容性等传统的开发模式已经显得有些吃力.之前一直用的是react,随 ...

  7. 基于Ant Design Vue封装一个表单控件

    开源代码 https://github.com/naturefwvue/nf-vue3-ant 有缺点本来是写在最后的,但是博文写的似乎有点太长了,估计大家没时间往下看,于是就把有缺点写在前面了,不喜 ...

  8. 使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换

    使用ant design vue的日历组件,实现一个简单交易日与非交易日的切换 需求: 日历区分交易日.非交易日 可以切换面板查看整年交易日信息 可以在手动调整交易日.非交易日 演示实例 序--使用软 ...

  9. Vue3学习(二)之集成Ant Design Vue

    一.集成Ant Design Vue npm install ant-design-vue@2.0.0-rc.3 --save 兼容性 Ant Design Vue 2.x 支持所有的现代浏览器. 如 ...

随机推荐

  1. gRPC 本地服务搭建

    RPC RPC 原理 主流 RPC 框架 gRPC 概述 特点 服务端创建 定义服务 生成 gRPC 代码 服务端实现 客户端实现 踩坑记录 源码 RPC RPC 原理 RPC 框架的目标就是让远程服 ...

  2. Springmvc使用注解实现执行定时任务(定时器)

    1.在Spring配置文件中添加 <task:annotation-driven/> 2.在需要调用执行定时任务的类中使用注解 @Service @Lazy(false) //避免spri ...

  3. SafeArrayGetUBound(EveryPatientInfo.parray,1,&UBound);

    SafeArray在ADO编程中经常使用,它的主要目的是用于automation中的数组型参数的传递.因为在网络环境中,数组是不能直接传递的,而必须将其包装成Safe Array.实质上Safe Ar ...

  4. # MATLAB数据处理

    目录 MATLAB数据处理 数据归一化处理 冒号的作用(获取指定行列的数据) MATLAB数据处理 mean(A,(b)) %均值函数,b为设置对哪一维上的数据进行处理,默认为第一维(列),行为第二维 ...

  5. Java中的float、double计算精度问题

    java中的float.double计算存在精度问题,这不仅仅在java会出现,在其他语言中也会存在,其原因是出在IEEE 754标准上. 而java对此提供了一个用于浮点型计算的类——BigDeci ...

  6. 大数据学习(2)- export、source(附带多个服务器一起启动服务器)

    linux环境中, A=1这种命名方式,变量作用域为当前线程 export命令出的变量作用域是当前进程及其子进程. 可以通过source 脚本,将脚本里面的变量放在当前进程中 附带自己写的tomcat ...

  7. js判断是否是对象获取子窗体值

    判断是否是对象 Object.prototype.toString.call(obj) 装换为数组 Array.prototype.slice.call(obj) 父窗体获取值子窗体值$(functi ...

  8. JavaScript例子3-对多选框进行操作,输出选中的多选框的个数

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. CF516D Drazil and Morning Exercise

    cf luogu 首先每个点到最远点的距离可以预处理出来,这个距离显然是这个点到树直径两端点的最大值.把那个距离记为\(d_i\),然后从小到大枚举\(d_i\),并强制它为最大的\(d_i\),那么 ...

  10. Linux 永久挂载镜像文件和制作yum源

    Linux mount命令是经常会使用到的命令,它用于挂载Linux系统外的文件. 1.镜像挂载到系统指定目录下:[root@master cdrom]#  mount -t auto  /mnt/c ...