vue2 jsx 渲染函数

render: (h, params) => this.$createElement('div', {
ref: 'child',

      }, 1111),

ref 不生效使用$createElement
https://codeantenna.com/a/OLcBUtdszJ

render: (h, params) => {
            return [
              <el-select
                filterable
                clearable
                v-model={params.row.feeTypeId}
                onchange={() => {
                  this.feeTypeChange(
                    this.info.salecontractInvoiceList,
                    params.row.feeTypeId,
                    params.index
                  );
                }}
              >
                {this.feeTypeList.map((item) => {
                  return (
                    <el-option
                      key={item.id}
                      label={item.name}
                      value={item.id}
                    ></el-option>
                  );
                })}
              </el-select>,
            ];
          },

render: (h, params) => {
            return [
              <el-input-number
                controls-position="right"
                step={1}
                min={1}
                max={99}
                controls={false}
                step-strictly
                v-model={params.row.qty}
                onchange={() => {
                  this.qtyChange(params.row, params.row.qty, params.index);
                }}
              />,
            ];
          },
   render: (h, params) => {
            return h(
              "el-button",
              {
                props: {
                  type: "text",
                },

                on: {
                  click: () => {
                    this.deleteRow(
                      this.info.salecontractInvoiceList,
                      params.index
                    );
                  },
                },
              },
              [h("i", { class: "el-icon-delete delete" }, "")]
            );
          },
render: (h, params) => {
            let userMessage;
            if (this.type != "order") {
              userMessage = (
                <el-button
                  type="text"
				  title="大票拆分"
				  icon="iconfont icondapiaochaifen"
				  class="icondapiaochaifen-btn"
                  onclick={() => {
                    this.batchInvoice(params.index, params.row);
                  }}
                >
                </el-button>
              );
            } else {
              userMessage = null;
            }
            return [
              <div>
                {userMessage}

                <el-button
                  type="text"
                  class="red"
				  icon="el-icon-delete"
                  onclick={() => {
                    this.deleteRow(params.index, params.row);
                  }}
                >
                </el-button>
              </div>,
            ];
          },
指令
 render: (h, params) => {
            return [
              <el-button
                type="text"
                v-auth="/CRM/项目订单/意向项目/新建编辑"
                onclick={() => {
                  this.edit(params.row.id);
                }}
              >
                编辑
              </el-button>,
            ];
          },
 render: (h, params) => {
            return [
              <el-button
                type="text"
                v-detail={{
                  auth: "/财务/发票管理/详情",
                  value: params.row.invoiceCode,
                }}
                onClick={() => {
                  this.toDetail(params.row.invoiceId);
                }}
              >
                {params.row.invoiceCode}
              </el-button>,
            ];
          },
过滤器
 render: (h, params) => {
            return h("span", {}, [
              this.$options.filters.currency(params.row.totalAmount, 2),
            ]);
          },
 render: (h, params) => {
            return [
              <span>
                {this.$options.filters.timeFmt(
                  params.row.submitTime,
                  "yyyy-MM-dd"
                )}
              </span>,
            ];
          },
  render: (h, params) => {
            let btnArray = Object.entries(params.row.taskMap);
            if (btnArray.length > 0) {
              return [
                this.buttonArray.map((item) => {
                  for (let i = 0; i < btnArray.length; i++) {
                    if (btnArray[i][1] === item.label&&this.authRequest(item.auth)) {
                      item.taskKey = btnArray[i][0];
                      return (
                        <el-button
                          type="text"
                          key={item.value}
                          disabled={
                            params.row.invoicecombineStateName === "已作废"
                          }
                          onClick={() => {
                            this.handleclick(params.row, item);
                          }}
                        >
                          {item.label}
                        </el-button>
                      );
                    }
                  }
                }),
              ];
            }
          },
 render: (h, params) => {
            return [
              <el-radio-group v-model={params.row.retrieve}>
                {this.typeOptions.map((item) => {
                  return [
                    <el-radio
                      key={item.value}
                      label={item.value}
                      disabled={this.isDisable(
                        params.row.lockState,
                        item.value
                      )}
                    >
                      {item.label}
                    </el-radio>,
                  ];
                })}
              </el-radio-group>,
            ];
          },
render: (h, params) => {
            return [
              <span>
                {" "}
                {this.$options.filters.currency(params.row.totalAmount, 2)}{" "}
              </span>,
            ];
          },
  render: (h, params) => {
            if (params.row && params.row.changeType !== 1) {
              return h(
                "span",
                {
                  props: {
                    level: 1,
                    value: this.value,
                  },
                  attrs: {
                    class: "add",
                  },
                  on: {},
                },
                "追加"
              );
            }
            return h(
              "span",
              {
                props: {
                  level: 1,
                  value: this.value,
                },
                attrs: {
                  class: "delete",
                },
                on: {},
              },
              "删除"
            );
          },
 render: (h, params) => {
            if (Array.isArray(params.row.attachBusinessRelations)) {
              return (
                <div>
                  {params.row.attachBusinessRelations.map((item) => {
                    return (
                      <div title={item.fileName}>
                        <el-button
                          class="ellipsis"
                          type="text"
                          onclick={() => {
                            download(item.attachId);
                          }}
                        >
                          {item.fileName}
                        </el-button>
                      </div>
                    );
                  })}
                </div>
              );
            }
          },
 render: (h, params) => {
            return (
              <Upload
                data={this.linkfile}
                {...{ on: { "update:data": (val) => (this.linkfile = val) } }}
              />
            );
          },
  render: (h, params) => {
            let userMessage;
            if (
              params.row.reserveProjectState === 0 ||
              params.row.reserveProjectState === null
            ) {
              userMessage = (
                <el-button type="text"
                disabled={params.row.projectStatus === 1?true:false}
                icon="el-icon-star-off"></el-button>
              );
            } else if (params.row.reserveProjectState === 1) {
              userMessage = (
                <el-button
                  type="text"
                  disabled={params.row.projectStatus === 1?true:false}
                  icon="el-icon-star-on orange"
                ></el-button>
              );
            } else if (params.row.reserveProjectState === 2) {
              userMessage = (
                <el-button type="text"
                disabled={params.row.projectStatus === 1?true:false}
                icon="el-icon-star-on gray"></el-button>
              );
            }
            return (
              <div
                onclick={() => {
                params.row.projectStatus === 1 ?null:this.changeProjectState(params.row);
                }}
              >
                {userMessage}
              </div>
            );
          },

  render: (h, params) => {
            let array = this.handlelist(params.row.linkmanPhoneItemList, 1);
            return (
              <div>
                {array.map((item, index) => {
                  return [
                    <span>
                      {index !== 0 ? "," : ""}
                      <span class={item.mainPhone == 1 ? "orange" : ""}>
                        {item.phoneNumber.trim()}
                      </span>
                    </span>,
                  ];
                })}
              </div>
            );
          },
posted @ 2022-05-23 14:38  7c89  阅读(251)  评论(0编辑  收藏  举报