在使用vxe-table组件时,常用的方法就是在columns中使用editRender来引入element-ui的一些组件,但局限性很大,只能使用有限规定的几个组件,如input, textarea, select, $input, $select, $switch,而使用slots插槽来自定义组件信息则可以使用更多的element-ui组件
1 { 2 3 editRender: {type: 'default'}, 4 slots: { 5 default: ({row}, h) => { 6 return [ 7 h('el-checkbox', { 8 props: { 9 value: row.checkbox 10 } 11 }) 12 ] 13 }, 14 edit: ({row}, h) => { 15 return [ 16 h('el-checkbox', { 17 props: { 18 value: row.checkbox 19 }, 20 on: { 21 change: (value) => { 22 row.checkbox = value; 23 } 24 } 25 }) 26 ] 27 } 28 } 29 }
在默认状态下和编辑状态下页面效果可以保持一致,并且通过edit中的change方法使单选多选框可以获得编辑功能。
不同的组件获得的编辑方法不同,如input中获得编辑的方法为input