在表格中用 h 渲染函数 怎么写较复杂的表格，比如左边商品图片右边文字描述。

[nameJw]

This function solves the problem (这个功能解决的问题)

强烈建议把 渲染函数换成 插槽的形式，后管系统太多表格了，用渲染函数 太麻烦了，体验非常不好，如果说没有打算使用插槽的话那就只能在前期换其他UI框架了

Expected API (期望的 API)

类似于 element antd

[07akioni]

封装成一个组件然后放进 render 函数。

或者自己加封装一个 slots 的 table，类似于（别人写的，我直接粘过来的，原理是这样）：

<template>
  <n-data-table v-bind="$props" :columns="columns" />
</template>

<script setup>
import { h } from "vue"
import { titleCase } from "@/lib/core/util"

const props = defineProps({
  headers: {
    type: Object,
    default: () => ({}),
    required: true,
  },
})

const slots = useSlots()
const columns = Object.keys(slots).map((name) => {
  return {
    title: name in props.headers ? props.headers[name] : titleCase(name),
    key: name,
    render: (row) => {
      return h(slots[name], { row: row })
    },
  }
})
</script>

加插槽的问题之前的 issue 也提过，暂时不会加。用其他的框架也没问题，符合自己的实际场景就好了。

[07akioni]

ref #216

[07akioni]

我上面的第一种方法举例来说，比如左边商品右边描述

// Detail.vue

<template>
  商品... | 描述...
</template>

<script setup>
defineProps({ ... })
</script>

// Table.vue

...template

import Detail from 'Detail.vue'

const columns = [{
  render (row) {
    return h(Detail, { ... })
  }
}]

[nameJw]

我上面的第一种方法举例来说，比如左边商品右边描述

// Detail.vue

<template>
  商品... | 描述...
</template>

<script setup>
defineProps({ ... })
</script>

// Table.vue

...template

import Detail from 'Detail.vue'

const columns = [{
  render (row) {
    return h(Detail, { ... })
  }
}]

我上面的第一种方法举例来说，比如左边商品右边描述

// Detail.vue

<template>
  商品... | 描述...
</template>

<script setup>
defineProps({ ... })
</script>

// Table.vue

...template

import Detail from 'Detail.vue'

const columns = [{
  render (row) {
    return h(Detail, { ... })
  }
}]

明白了，我试试，感谢