zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    calc PI
    c# 设置水印,消除水印
    设置windows10 背景颜色
    C# 获取当前路径
    反编译工具
    c# 窗口API,以及全屏锁定一些tips
    c# 几种singleton 实现
    List<T> JIT 分配策略
    软件工程
    mariaDB 安装/卸载+启动/关闭 服务
  • 原文地址:https://www.cnblogs.com/zhanyuefeixian/p/13937561.html
Copyright © 2011-2022 走看看