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
三、记录
- 数据表格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')
},
})
总结
以上就是今天要讲的内容,本文持续会更新,有问题都会记录。