table 合并时无法使用插槽

[asunaCC]

• I have searched the issues of this repository and believe that this is not a duplicate.

Version

undefined

Environment

windows10 Google开发者版本86.0.4214.2 vue: ^2.6.11

Reproduction link

https://www.antdv.com/components/table-cn/

Steps to reproduce

{{ text }} ---- {{ record }} } const columns = [ { title: "订单详情", dataIndex: "consigneeAddress", scopedSlots: { customRender: "consigneeAddress" }， customRender：(value, row, index) => { const obj = { children: value, attrs: {} }; obj.attrs.colSpan = 8; return obj; } }

What is expected?

期望能够在使用单元格合并时同时使用插槽，或者在返回对象 children属性中使用HTML代码

What is actually happening?

无法使用插槽，HTML代码被渲染为字符串

[ChaosLcc]

遇到了同样的问题，官方给的demo里面 children 赋值是不是草率了？直接把标签给写进去了，然并卵。

return {
  children: <a href="javascript:;">{text}</a>,
  attrs: {
    colSpan: 5,
  }
}

[sendya]

@asunaCC 能提供复现吗？

@ChaosLcc children 的值可以是 VNode， 这写法是 Render/JSX 没有什么问题，并不草率。
我猜你大概率 slot customRender 和 column 属性的 customRender 混用了吧，这两个只能有一个会生效，二者是占用同一个东西，slot customRender 的能力比 column 属性下的 customRender 功能更少，仅适合简单的模板(template) 使用。

[ChaosLcc]

@sendya

{
    title: '加装记录',
    dataIndex: 'history',
    align: 'center',
    customRender: (text, record, index) => {
    const obj = {
        children: <div><span>已加装空调、行车记录仪</span><br/><a-button type="link" @click="showBoutiqueHistory()">精品加装项(3)＞</a-button></div>,
        attrs: {}
    }
    if (index === 1) {
        obj.attrs.colSpan = 0
    }
    return obj
    }
}

children添加了个@click就报了如下语法错误：

Failed to compile.

./src/views/serviceInitiate/boutique/BoutiqueBeforeFromInternal.vue?vue&type=script&lang=js& (./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/serviceInitiate/boutique/BoutiqueBeforeFromInternal.vue?vue&type=script&lang=js&)
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/liubi_chaos_g/Documents/SixArm/system4s/src/views/serviceInitiate/boutique/BoutiqueBeforeFromInternal.vue: Unexpected token (154:80)

  152 |           customRender: (text, record, index) => {
  153 |             const obj = {
> 154 |               children: <div><span>已加装空调、行车记录仪</span><br/><a-button type="link" @click="showBoutiqueHistory()">精品加装项(3)＞</a-button></div>,
      |                                                                                 ^
  155 |               attrs: {}
  156 |             }
  157 |             if (index === 1) {
    at Object.raise (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:7044:17)
    at Object.unexpected (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:8422:16)
    at Object.jsxParseIdentifier (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:3889:12)
    at Object.jsxParseNamespacedName (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:3899:23)
    at Object.jsxParseAttribute (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:3983:22)
    at Object.jsxParseOpeningElementAfterName (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:4004:28)
    at Object.jsxParseOpeningElementAt (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:3997:17)
    at Object.jsxParseElementAt (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:4029:33)
    at Object.jsxParseElementAt (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:4045:32)
    at Object.jsxParseElement (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:4103:17)
    at Object.parseExprAtom (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:4110:19)
    at Object.parseExprSubscripts (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:9287:23)
    at Object.parseMaybeUnary (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:9267:21)
    at Object.parseExprOps (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:9137:23)
    at Object.parseMaybeConditional (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:9110:23)
    at Object.parseMaybeAssign (/Users/liubi_chaos_g/Documents/SixArm/system4s/node_modules/@babel/parser/lib/index.js:9065:21)

就像 @asunaCC 提出的问题 期望能够在使用单元格合并时同时使用插槽

目前可还有更好的解决方案吗，求指教，感谢！

[sendya]

Render /JSX 都给你提示了，你应该去看一下怎么用吧，怎么就 template 用法，用到上面了...

onClick 或者 { on: { click: () => {} }}

[ChaosLcc]

@sendya 解决了，先来感谢你！主要还是自己太菜了。感觉自己前端的道路又长了。。。
绑定事件并传参 onClick={this.showBoutiqueHistory.bind(this, record)}

{
    ...
    customRender: (text, record, index) => {
    const obj = {
        children:
        <div>
            <span>已加装空调、行车记录仪</span><br/>
            <a-button type="link" onClick={this.showBoutiqueHistory.bind(this, record)}>精品加装项(3)＞</a-button>
        </div>,
        attrs: {}
    }
    if (index === 1) {
        obj.attrs.colSpan = 0
    }
    return obj
    }
}

methods中

showBoutiqueHistory(record, e) {
      console.log(record)
      console.log(e)
}

查看了好多资料，帮助最大的是这个 https://www.runoob.com/react/react-event-handle.html
其余参考资料：https://juejin.im/post/6844903607909744654
https://cn.vuejs.org/v2/guide/render-function.html
最后吐槽下，不能用插槽，确实有点难受

[LongYue9608]

children 里面的div怎么动态添加属性 我想加个id 用:id 或者 id=${}这样都不行 @sendya

[LongYue9608]

children 里面的div怎么动态添加属性 我想加个id 用:id 或者 id=${}这样都不行 @sendya

我知道了 这样id={}

[github-actions]

This issue is stale because it has been open 60 days with no activity. Remove stale label or comment or this will be closed in 7 days

[heboliufengjie]

@sendya 解决了，先来感谢你！主要还是自己太菜了。感觉自己前端的道路又长了。。。
绑定事件并传参 onClick={this.showBoutiqueHistory.bind(this, record)}

{
    ...
    customRender: (text, record, index) => {
    const obj = {
        children:
        <div>
            <span>已加装空调、行车记录仪</span><br/>
            <a-button type="link" onClick={this.showBoutiqueHistory.bind(this, record)}>精品加装项(3)＞</a-button>
        </div>,
        attrs: {}
    }
    if (index === 1) {
        obj.attrs.colSpan = 0
    }
    return obj
    }
}

methods中

showBoutiqueHistory(record, e) {
      console.log(record)
      console.log(e)
}

查看了好多资料，帮助最大的是这个 https://www.runoob.com/react/react-event-handle.html
其余参考资料：https://juejin.im/post/6844903607909744654
https://cn.vuejs.org/v2/guide/render-function.html
最后吐槽下，不能用插槽，确实有点难受

@sendya 解决了，先来感谢你！主要还是自己太菜了。感觉自己前端的道路又长了。。。
绑定事件并传参 onClick={this.showBoutiqueHistory.bind(this, record)}

{
    ...
    customRender: (text, record, index) => {
    const obj = {
        children:
        <div>
            <span>已加装空调、行车记录仪</span><br/>
            <a-button type="link" onClick={this.showBoutiqueHistory.bind(this, record)}>精品加装项(3)＞</a-button>
        </div>,
        attrs: {}
    }
    if (index === 1) {
        obj.attrs.colSpan = 0
    }
    return obj
    }
}

methods中

showBoutiqueHistory(record, e) {
      console.log(record)
      console.log(e)
}

查看了好多资料，帮助最大的是这个 https://www.runoob.com/react/react-event-handle.html
其余参考资料：https://juejin.im/post/6844903607909744654
https://cn.vuejs.org/v2/guide/render-function.html
最后吐槽下，不能用插槽，确实有点难受

多谢帮了大忙，真的吐槽官方例子深入定制一点就需要看源码和官方仓库github issues

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.