render函数 for循环返回多个p标签

1. render函数 for循环返回多个p标签

{
          title: `${t("Account.specialGoodsIdentification")}`,
          key: "specialIdentification",
          render(row: any) {
            return h(
            // 1. 要渲染的标签名称：第一个参数【必需】
            "div", 
           // 2. 渲染标签的属性：第二个参数【可选】
            {
             	style: {
		          color: "#333",
		          border: "1px solid #ccc",
		        },
		        class: "",
		        id: "",
		        onClick: changeNum,
        }, 
        // 3. 渲染标签的子元素数组：第三个参数【可选】
        [
           specialIdentificationList.map((item: any) => {
               return h(
                 "p",
                 {},
                 {
                   default: () => {
                     if (row.specialIdentification?.includes(item.value)) return item.label;
                   },
                 },
               );
             }),
           ]);
   		},
},

<template>
  <div>
    <renderButton />
  </div>
</template>
 
<script setup>
import { h, ref } from "vue";
const renderButton = {
  render: () => {
    return h(
      "button",
      {
        style: {
          color: "#333",
          border: "1px solid #ccc",
        },
        class: "",
        id: "",
        onClick: changeNum,
      },
      { default: () => num.value}
    );
  },
};
let num = ref(0);  // vue3中需要使用ref或reactive声明变量，否则无法实现双向数据绑定
const changeNum = () => {
  num.value++    // 改变ref定义的变量值需要使用.value , reactive不需要 
}
 
</script>