【Naive UI中表格与表单项的结合】

原创已于 2022-06-08 12:44:49 修改 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2022-06-07 17:36:06 首次发布

Vue 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue项目中如何利用NaiveUI组件库中的NFormItem和NInput，结合表格（DataTableColumns）实现表单项的渲染与验证。通过h函数创建虚拟节点，设置props和children，实现数据绑定和输入验证，从而达到动态表格与表单项的完美结合。

Naive UI中表格与表单项的结合

一、vue中h函数

参照链接：

总结：h函数创建虚拟节点(VNode)，被渲染到html中。
可传参数：

tag：HTML标签名、组件，例如：‘div’，必须项
props：属性，可选项
children：子VNodes，可选项

二、Naive UI组件

1.组件

Naive UI 官方文档

2.实例

代码如下（示例）：

const columns = [
    {
        title: "title",
        key: "key",
        width: "80%",
        className: "operation-height",
        render(row, index) {
            return h(
                NFormItem,
                {
                    value: ref(row.ticker),
                    rule: {
                        trigger: "input",
                        validator() {
							//  验证
                            }
                        },
                    },
                },
                [
                    h(NInput, {
                        value: row.ticker,
                        maxlength: 35,
                        onInput(val) {
                            tableData.value[index].ticker = val;
                        },
                    }),
                ]
            );
        },
    },
];