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

在使用vxe-table组件时，常用的方法就是在columns中使用editRender来引入element-ui的一些组件，但局限性很大，只能使用有限规定的几个组件，如input, textarea, select, $input, $select, $switch，而使用slots插槽来自定义组件信息则可以使用更多的element-ui组件

 

{
         
          editRender: {type: 'default'},
          slots: {
            default: ({row}, h) => {
              return [
                h('el-checkbox', {
                  props: {
                    value: row.checkbox
                  }
                })
              ]
            },
            edit: ({row}, h) => {
              return [
                h('el-checkbox', {
                  props: {
                    value: row.checkbox
                  },
                  on: {
                    change: (value) => {
                      row.checkbox = value;
                    }
                  }
                })
              ]
            }
          }
        }

 

在默认状态下和编辑状态下页面效果可以保持一致，并且通过edit中的change方法使单选多选框可以获得编辑功能。

不同的组件获得的编辑方法不同，如input中获得编辑的方法为input