x-extends / vxe-table

Vxe table 的表格组件
https://vxetable.cn
MIT License
7.61k stars 1.05k forks source link

自定义渲染器select,想通过表格column传一个url过来,通过vuex同步请求后台数据,在renderEdit方法上加了同步就渲染不出来了,有办法解决吗 #140

Closed virycs closed 5 years ago

virycs commented 5 years ago

VXETable.renderer.add('Select', { autofocus: '.my-select', async renderEdit (h, editRender, { row, column }) { let dataset = column.own.dataset.data if (!dataset) { let url = column.own.dataset.url await store._actions.getResultByUrl[0]({ url }).then(ret => { dataset = ret }) } return [h('Select', { props: { value: row[column.property], transfer: true, clearable: true, filterable: true }, on: { 'on-change': (val) => { row[column.property] = val } } }, dataset.map(item => { return h('Option', { props: {value: item.value, key: item.value} }, item.label) })) ] }, renderCell (h, editRender, { row, column }) { return [ {row[column.property]} ] } })

virycs commented 5 years ago

周日没人在线啊,纠结了大半天。调试过程看代码都是正常跑的,select组件死活出不来,renderEdit方法上去掉async传过来静态数据没有问题

xlz26296 commented 5 years ago

你的方式本身就不对,vue 的数据双向同步你不用,非要在渲染函数中去发请求那肯定挂了 应该在外部发请求,将结果通过 edit-render 通过某个 dataList 属性绑定,然后再渲染函数中去读取

virycs commented 5 years ago

这不是为了后续方便配置吗,用ajax同步请求还是可以的,用axios不行。我们公司搞了套未开源的组件就是这么玩的,还挺方便。不过在data里面定义的columns怎么实现双向同步,没搞成功

xuliangzhan commented 5 years ago

看得出来你应该就是为了实现单元格的下拉组件能根据不同场景去获取对应数据; 但你把这个异步获取放到渲染函数本身就是错误的做法,vue的渲染机制是会频繁执行渲染函数; 你应该单独封装成组件而不是直接在渲染函数去发请求,渲染函数不是用来做异步获取数据的

virycs commented 5 years ago

嗯,已经是单独的组件了,现在要解决的就是怎么把外部数据往editRender放,我再试试

xuliangzhan commented 5 years ago

很多插件都是基于渲染器实现了。你可以查看源码去做参考,比如: https://github.com/xuliangzhan/vxe-table-plugin-iview/blob/master/index.js

virycs commented 5 years ago

好的 原来都实现好了,用现成的更爽哈 更喜欢用vxe-grid,传值有些差异,哈哈,没有vxe-grid的demo啊