antvue中的a-table的customRender覆盖插槽替换为自定义的内容

30 阅读1分钟

一般情况渲染

computed: {
    columns() {
        return [
              {
                  title: "子单号",
                  dataIndex: "childOrderNo",
                  align: "center"
                  scopedSlots: { customRender: "childOrderNo" }, //内容插槽
                  slots: { title: "childOrderNoTitle" } //表头插槽
            },
        ]
    }
}    

有customRender函数的情况下的表头和内容解决方案

  • 通过checkbox的组件举例(可以拓展其它内容)
computed: {
    columns() {
        return [
              {
                  title: () => {
                    return h("a-checkbox", {
                      props: {
                        checked: this.isSelectAll //data中进行定义
                      },
                      on: {
                        change: (e) => {
                          this.onCheckboxAll()
                        }
                      }
                    })
                  },
                  dataIndex: "selectRow",
                  align: "center",
                  customRender: (text, record) => ({
                    children: h("a-checkbox", {
                      props: {
                        checked: record.selectRow
                      },
                      on: {
                        change: (e) => {
                          //todo
                        }
                      }
                    })
                  })
                }
        ]
    }
}