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