vxe-table中如何用slots嵌入element-ui组件

在使用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

原文地址:https://www.cnblogs.com/zhanyuefeixian/p/13937561.html