以el-table 为示例

const columns: TableColumnList = [
  {
    label: "勾选列", // 如果需要表格多选，此处label必须设置
    type: "selection",
    width: "55",
    minWidth: "55",
    align: "left"
  },
  {
    label: "商品名称",
    align: "left",
    prop: "commodityName"
  },
  {
    label: "商品分类",
    align: "center",
    prop: "commodityType",
    cellRenderer: ({ row, props }) => {
      let ct = catgoryList.value.find(e => e.id === row.commodityType);
      return ct ? ct.label : "";
    }
  }
]

import { ElTableColumn } from "element-plus";
import { Fragment, defineComponent, type PropType } from "vue";

export default defineComponent({
  name: "orderTableForm",
  props: {
    dataList: {
      type: Array,
      default: []
    },
    columns: {
      type: Array as PropType<TableColumnList>,
      default: () => []
    }
  },
  render() {
    const dataList = this.dataList;
    const columns = this.columns;
    return (
      <el-table data={dataList}>
        {columns.map((item, index) => (
          <el-table-column
            key={index}
            label={item.label}
            align={item.align}
            prop={item.prop}
            type={item.type}
          >
//显示 scopeSlots使用 等价于 <template #default="{row}"> /* 写单列自定义的内容*/</template>
            {scope =>
              item.cellRenderer &&
              item.cellRenderer({
                row: scope.row,
                props: item
              })
            }
          </el-table-column>
        ))}
      </el-table>
    );
  }
});

  ElMessageBox({
    title: "修改备注",
    message: () => h(ElInput, {
      placeholder: "请填入备注",
      type: "textarea",
      rows: 5,
      modelValue:bak.value,
      onInput:(e) => {
        bak.value = e
      }
    }),
    showCancelButton: true,
    cancelButtonText: "取消",
    confirmButtonText: "提交",
  })