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

榛果热可可

已于 2022-06-08 12:44:49 修改

阅读量998

点赞数 1

分类专栏： Vue 文章标签： vue

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

本文链接：https://blog.csdn.net/chenchendiandian/article/details/125168192

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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;
                        },
                    }),
                ]
            );
        },
    },
];