-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DataTable 增加template支持 #4273
Comments
ref #216 我认为 template 在一些场景会让代码变的更不清晰, 可以通过 |
两种方式, 各有优缺点, 所以让用户选择不好吗? |
@ibryang 已经半年多没有任何更新了,这么好的一个库,只能放弃了 |
@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>
) |
毛遂自荐 @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/> |
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 |
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)
The text was updated successfully, but these errors were encountered: