【无标题】

vue3 + vite 项目中 使用 naive UI

前言

由于尤大大的推荐
以前看了尤大大的推荐,这次新进公司 开发一个新项目 刚刚好可以完全使用新的技术包括新的UI库,毕竟antDes 、vant 、element、真的用烂了!哈哈哈!!!
这篇文章主要记录naive UI 使用时遇到的问题及解决方法,仅作为记录一下,简单使用,不涉及复杂技术


提示:以下是本篇文章正文内容,下面案例可供参考

一、naive UI

链接:https://www.naiveui.com/zh-CN/light
注意,naive-ui 仅支持 Vue3。如果你在使用 Vue2,可以去看看别的库。

二、使用步骤

1.引入库

npm i -D naive-ui
npm i -D vfonts

三、记录

  1. 数据表格data-table
    要求:(需要两个操作按钮)
    在这里插入图片描述
// vue
//<n-data-table :columns="columns" :data="data" />
 const data = ref([
  {
    key: 0,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    btn: ['编辑', '删除'], // 此处对应createColumns 中render 中的数据,可以通过遍历的事方式进行按钮的操作
  },
])
const createColumns = ({ handleClick }: { handleClick: (name: string, row: Rows) => void }): DataTableColumns<Rows> => {
  return [
    {
      title: '省',
      key: 'name',
    },
    ......
    {
      title: '管理',
      key: 'tags',
      titleColSpan: 2,
      colSpan: (rowData, rowIndex) => (rowIndex === 0 ? 2 : 1),
      render(r: Rows) {
        const btnName = (r.btn || null).map((key) => {
          return h(
            NButton,
            {
              style: {
                marginRight: '6px',
              },
              onClick: () => handleClick(key, r),
            },
            {
              default: () => key,
            },
          )
        })
        return btnName
      },
    },
  ]
}
const columns = createColumns({
  handleClick(name, r) {
    if (name === 'edit')
      window.$message?.info('eidt')
    else
      window.$message?.info('del')
  },
})

总结

以上就是今天要讲的内容,本文持续会更新,有问题都会记录。


加油!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值