如上代码会因为scopedSlots中有customRender,下面有customRender函数,因此不会出现两个效果,以后面的customRender函数中的return出去的内容为准

            // js中数据
            this.headerData.push({
              title: "test",
              dataIndex: "test",
              key: "test",
              scopedSlots: {
                customRender: "test",
              },
               customRender: function (text, record, index) {
               }
              
              },
            });
//a-table中数据
            <template
                slot="test"
                slot-scope="text,record"
              >
              <a-input/>
            </template>

 我的项目是初始数据是customRender的内容,进过交互(点击等事件)之后出现template中的内容,解决的方法:

            this.headerData.push({
              title: "test",
              dataIndex: "test",
              key: "test",
              customRender: function (text, record, index) {
                if(true){
                  return (  <a-input/> )
                } else {
                  return "初始内容"
                }
                
              },

值的传递

            this.headerData.push({
              title: "test",
              dataIndex: "test",
              key: "test",
              customRender: function (text, record, index) {
                if(true){
                  return (  
                    <span
                     name={name}//原版为:name="name"
                     onSelect={handlerSelect}//原版为@select="handlerSelect"
                    ></span>
                 )
                } else {
                  return "初始内容"
                }
                
              },

这里的HTML元素需要用()包裹,原因参照这个

关于antdv表格中customRender不起作用的研究(Vue2)_renovateF5的博客-CSDN博客

Antd中表格customRender行列合并与插槽如何同时使用

Logo

前往低代码交流专区

更多推荐