vxe grid slots 用法

 官方例子:Vxe Table v3.8

  {
                  field: 'num1',
                  title: 'Num1',
                  showHeaderOverflow: true,
                  filters: [{ data: '' }],
                  editRender: { autofocus: '.my-input' },
                  slots: {
                    // 使用插槽模板渲染
                    default: 'num1_default',
                    header: 'num1_header',
                    footer: 'num1_footer',
                    filter: 'num1_filter',
                    edit: 'num1_edit'
                  }
                },
                {
                  field: 'address',
                  title: 'Address',
                  showOverflow: true,
                  slots: {
                    // 使用 JSX 渲染
                    default: ({ row }) => {
                      return [
                        <span style="color: blue" onClick={ () => this.addressClickEvent(row) }>自定义模板内容</span>
                      ]
                    }
                  }
                },

自定义的用法

for (var item of tabhead) {

                    if (item.children != undefined && item.children != null) {

                        for (var subItem of item.children) {

                            //xsje销售金额

                            if (subItem.field == 'xsje') {

                                this.configData[subItem.field]=subItem.routerpath;

                                subItem.slots = {

                                    // 使用 JSX 渲染

                                    default: ({ row , column }) => {

                                        return [

                                            <span style="color: blue;text-decoration:none;cursor:pointer;" onClick={() => {

                                                var routerpath = this.configData[column.field];

                                                this.$refs.detailDailog.open(routerpath);

                                            }}>{row.xsje}</span>

                                        ]

                                    }

                                }

                            }

                        }

                    }

                }

                this.tableColumns = tabhead

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值