Comments (6)
Since Vue 3.3 now supports typed Slots with defineSlots
it would be great If you could reconsider this decision. For me, render functions feel were un-vue like. I know there a basic feature of vue, but it feels much more natural, to keep all template related stuff inside <template>
. A lot of other vue component libraries support this (primevue, vant, ...). Overall I just like this library better, so having the choice between render functions and slots would make it perfect for me :)
from naive-ui.
Dynamic slot name is not a good pattern since it's very unfriendly to typescript. Personally I don't think this is a good API.
Currently vue's slot has no type but if some time later it supports it, the API will cause chaos.
The case you provide is not convicing since it doesn't show template slot is much easier than render function. If you could provide some more convincing examples, I will reopen the issue.
from naive-ui.
而且使用h函数渲染会导致class等属性无效等问题
单组件自定义还行,多个组件自定义时就更不方便,而且难度不低哦
比如要实现这样de的效果:
貌似只能这么写吧:
{
title: '操作',
key: 'operation',
render(row) {
return [
h(NButton, {
text: true,
onClick: () => {
},
}, '编辑'),
h(NButton, {
text: true,
style: {
marginLeft: '12px',
},
onClick: () => {
},
}, '删除'),
h(NButton, {
text: true,
style: {
marginLeft: '12px',
},
onClick: () => {
},
}, '重置密码'),
]
},
},
from naive-ui.
而且使用h函数渲染会导致class等属性无效等问题 单组件自定义还行,多个组件自定义时就更不方便,而且难度不低哦 比如要实现这样de的效果: 貌似只能这么写吧:
{ title: '操作', key: 'operation', render(row) { return [ h(NButton, { text: true, onClick: () => { }, }, '编辑'), h(NButton, { text: true, style: { marginLeft: '12px', }, onClick: () => { }, }, '删除'), h(NButton, { text: true, style: { marginLeft: '12px', }, onClick: () => { }, }, '重置密码'), ] }, },
可以定义一个组件,包含着三个按钮然后暴露一些属性出来,那样渲染函数写起来会简单一些
from naive-ui.
If you want to use other components in the cell template or / and use template directives, it would be much easier to use with having slots available.
from naive-ui.
I created a project @skit/x.naive-ui based on Naive-UI, enables to use DataTable in template style. Welcome to improve it.
For the scenario proposed by OP, it can be written as:
<x-n-data-table :columns="columns" :data="data">
<template #renderCell="{ column, rowData, value }">
<span>{{ column.title }} {{ value }} Custom things</span>
</template>
</x-n-data-table>
from naive-ui.
Related Issues (20)
- 能否针对 data-table 组件 增加列的显示隐藏属性?
- [data-table]在 data-table 组件中暴露“on-draged”事件
- upload组件创建动态表单之后,我想动态回显无法做到 HOT 1
- Data Table default sorter broken when using null values HOT 5
- 对话框 Dialog,content 换行 HOT 1
- data-table的row-key能否支持数组下标 HOT 1
- 时间线内容支持交替展现
- NButton作为插槽内容时无法生效 HOT 1
- Official website cannot be accessed。https://www.naiveui.com/ HOT 8
- DataTable开启虚拟列表时可指定加载的条目数量
- 希望DataTable数据表格能够支持拖拽排序 HOT 1
- tree showline 无效 HOT 5
- n-message-provider :to="false" can not work HOT 1
- 表格上下左右键盘事件触发选中、行列编辑
- 希望所有用到key的地方都允许使用symbol类型
- DataTable iOS scroll issues HOT 2
- 数据表格DataTable新增列表行拖拽功能
- 封装Upload组件后使用UploadDragger拖拽上传无法触发上传
- 部分设备的微信浏览器下,n-input在disabled状态文字内容会显示不出来 HOT 4
- How to set z-index attribute in the image preview container? HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from naive-ui.