Ant design vue框架,table控件中customRow用法的一个坑
2020-06-07 05:07
1766 查看
Ant design vue框架中,table控件中customRow用法的一个坑
今天在写代码时,用到Ant design框架中的<a-table>控件,其中的一个需求是:点击table中的一行,需要执行一些操作。因为没有默认的行点击事件,需要用到customRow来进行自定义。 这个方法,在官方的文档中,有使用说明,如下:
<Table customRow={(record) => { 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) //这一行会报错,报未定义 } } }) }
在执行时,会报错,如下:
[Vue warn]: Error in v-on handler: “TypeError: Cannot read property ‘getDetailList’ of undefined”。
不使用lamada表达式,则不会出现这样的问题,修改后的rowClick方法如下:
rowClick(record, index) { return { on: { click: () => { console.log(record, index) this.getDetailList(record.matbillid) } } } },
可正常执行,并能正确调用getDetailList方法
相关文章推荐
- 好用的前端框架ant-design的vue案例在GitHub中的地址
- Nuxt.js+Ant Design Vue树形控件组件
- Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
- vue+ant-design 实现table的td元素限定为固定的宽度,超出的字用省略号代替
- 关于ant-design-vue的table内嵌输入框性能问题
- Vue 2.x折腾记 - (16) 基于Ant Design Vue 封装一个配置式的表单搜索组件
- Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
- ant design of vue的table点击行变色
- 基于vue.js 2.0,不使用webpack,只在浏览器上单独使用Element UI的Table表格控件完成增删改查页面
- tableLayoutPanel容器,控件占多格的用法
- ant-design-vue运行时切换主题
- 实现一个类 Vue 的 MVVM 框架
- 用JS写的一个TableView控件代码
- ant design of vue 的表格如何自定义houver样式
- antDesignVue 时间选择框,不可选过去或未来时间
- 【自然框架】表单控件 之 一个表单修改多个表里的记录
- ant-design-vue 实现表格内部字段验证功能
- vue的el-table表格 点击添加要素 出现一个新的div
- VUE+Ant Design Vue多张图为一组轮播展示
- ant-design 实现一个登陆窗口