【无标题】

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')
  },
})

---

总结

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

---

加油！！！