DataTable 增加template支持

[liu-xinhui]

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

目前的render方式过于复杂，语法晦涩难懂，复杂的单元格简直没法看。并且不能实现数据分离，我们需要持久化columns,现在这种columns中定义函数无法实现持久化。

希望能是实现类似于iview或者antd的语法，【不是element那种，不够灵活】

https://www.iviewui.com/view-ui-plus/component/form/table
https://antdv.com/components/table-cn

Expected API (期望的 API)

<Table :columns="columns" :data="data">
    <template #name="{ row, index }">
      <Input type="text" v-model="editName" v-if="editIndex === index" />
      <span v-else>{{ row.name }}</span>
    </template>

    <template #age="{ row, index }">
      <Input type="text" v-model="editAge" v-if="editIndex === index" />
      <span v-else>{{ row.age }}</span>
    </template>
<Table/>

[jahnli]

ref #216

我认为 template 在一些场景会让代码变的更不清晰, 可以通过 tsx 来达到基本类似的效果

[ibryang]

两种方式, 各有优缺点, 所以让用户选择不好吗?
render方式, 稍微复杂一点的表格, 写起来是真的难受.

[liu-xinhui]

@ibryang 已经半年多没有任何更新了，这么好的一个库，只能放弃了

[liugu0914]

@liu-xinhui 作者没空只能自己扩展，二次封装n-data-table组件可以达到这个效果。

template

    <BaseTable
      :columns="columns"
      :data="data.dataSource">
      <template #actions="{ row, index }">
        <NButton type="primary">{{ row.name + index }}</NButton>
      </template>
    </BaseTable>

二次封装 columns

  const columns = computed(() => {
    const slotKeys = Object.keys(slots) // 传递的slots
    const fColumns = props.columns // 插槽传递的columns

    fColumns.forEach((item) => {
      if (slotKeys.includes(item.key as string)) { //渲染插槽
        item.render = (row, index) => slots[item.key]({ row, index, column: item })
      }
    })

    return fColumns
  })

  // BaseTable
    return () => (
      <NDataTable {...props} columns={columns.value}>
        {slots}
      </NDataTable>
    )

[fudiwei]

毛遂自荐 @skit/x.naive-ui，基于 Naive-UI 二次封装了 DataTable 等组件，支持插槽式的写法。

针对 OP 的需求，可写为：

<x-n-data-table :columns="columns" :data="data">
  <template #render-cell="{ column, rowData, rowIndex }">
    <template v-if="column.key === 'name'">
      <Input type="text" v-model="editName" v-if="editIndex === rowIndex" />
      <span v-else>{{ rowData.name }}</span>
    </template>
    <template v-else-if="column.key === 'age'">
      <Input type="text" v-model="editAge" v-if="editIndex === rowIndex" />
      <span v-else>{{ rowData.age }}</span>
    </template>
  </template>
<x-n-data-table/>

[jahnli]

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem