vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳解

更新時間：2023年08月14日 11:06:57 作者：CtsRain

這篇文章主要給大家介紹了關(guān)于vue3+Naive?UI數(shù)據(jù)表格基本使用方式詳?shù)南嚓P(guān)資料,Naive?UI是一個基于Typescript開發(fā)的針對Vue3開發(fā)的UI組件庫,由TuSimple(圖森未來)公司開發(fā)并開源,需要的朋友可以參考下

一、基礎(chǔ)使用方式

1.引入表格及數(shù)據(jù)

<-- 表格標(biāo)簽 -->
<n-data-table :bordered="false" :single-line="false" 
:columns="tableHead" :data="tabeldata"/>
//表頭數(shù)據(jù) 一個對象表示一列 titel是每一列的名字 key是對應(yīng)的字段名 可在對象類寫每一列的寬度居中方式等樣式
const tableHead = ref([
  {
    title: '姓名',
    key: 'name',
    width: 300,
    align: 'center',
  },
  {
    title: '年齡',
    key: 'age'
  },
  {
    title: '地址',
    key: 'address'
  },
   {
    title: '標(biāo)簽',
    key: 'tags',
    render(row) {
      const tags = row.tags.map((tagKey) => {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px'
            },
            type: 'info',
            bordered: false
          },
          {
            default: () => tagKey
          }
        )
      })
      return tags
    }
  },
  {
    title: '狀態(tài)',
    key: 'status'
  },
  {
    title: '操作',
    key: 'actions',
    //添加按鈕時必須有模板組件，將按鈕信息以參數(shù)形式傳到組件中，在組件中寫相關(guān)樣式 或 使用naive ui提供的組件
    render(record) {
      return [
        h(NButton, { //NButton是naive ui提供的按鈕組件模板，需要引入 import { NTag, NButton, } from 'naive-ui'
          text: true,
          style: { marginRight: '10px' },
          onClick: () => viewdetail(record)
        },
          { default: () => '詳情' }
        ),
        h(NButton, {
          text: true,
          onClick: () => deletedata(record)
        },
          { default: () => '刪除' }
        )
      ]
    }
  }
])
//表格數(shù)據(jù)
const tabeldata = ref([
  {
    key: 0,
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    status: '0',
    tags: ['nice', 'developer']
  },
  {
    key: 1,
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    status: '1',
    tags: ['wow']
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    status: '0',
    tags: ['cool', 'teacher']
  }
])

這樣一個基礎(chǔ)表格就渲染出來了

二、修改操作按鈕等標(biāo)簽樣式

項目中可能會修改操作按鈕、標(biāo)簽等元素樣式修改，以按鈕為例，提供以下方式（需要注意的是，在naive ui數(shù)據(jù)表格中使用按鈕、標(biāo)簽等元素必須提供HTML元素模板，否則渲染出錯，所謂模板其實就是一個組件）

1.naive ui提供的模板

{
    title: '操作',
    key: 'actions',
    //使用naive ui提供的按鈕模板，需要引入按鈕模板 import { NButton } from 'naive-ui'
    render(record) {
      return [
        h(NButton, {//可在里面寫按鈕樣式
          text: true,
          style: { marginRight: '10px' },
          onClick: () => viewdetail(record)//點擊按鈕后的回調(diào)
        },
          { default: () => '詳情' }//按鈕顯示名稱
        ),
        h(NButton, {
          info: true,
          onClick: () => deletedata(record)
        },
          { default: () => '刪除' }
        )
      ]
    }
  }

這樣就可以渲染出按鈕

2.自定義按鈕模板

項目中使用naive提供的模板可能滿足不了需求，這時可以使用自定義模板（組件）

①定義一個組件文件

<template>
    <div>
        <template v-for="(action, index) in getActions" :key="index">
            <n-button v-bind="action" style="margin-right: 10px;" text>
                {{ action.label }}
            </n-button>
        </template>
    </div>
</template>
<script lang="ts">
import { defineComponent, PropType, computed, toRaw, onMounted } from 'vue';
export default defineComponent({
    props: {
        actions: {
            type: Object,
            default: null,
            required: true,
        },
    },
    setup(props) {
        onMounted(() => {
            // console.log(props);
        })
        const getActions = computed(() => {
            return props.actions
        });
        return {
            getActions,
        };
    },
});
</script>

②頁面中引入該組件并使用

import ActionTemplate from '@/components/ActionTemplate.vue'

{
    title: '操作',
    key: 'actions',
    render(record) {
      return h(ActionTemplate,//使用按鈕組件
        {
          actions: [//通過props傳參將actions傳給按鈕組件（對應(yīng)樣式也可傳遞過去）
            {
              label: '刪除',
              onClick: deletedata.bind(null, record),
            },
            {
              label: '詳情',
              onClick: viewdetail.bind(null, record),
            },
          ],
        }
      )
    }
  }

這樣就可以渲染出按鈕

三、根據(jù)數(shù)據(jù)顯示不同內(nèi)容

項目中可能會根據(jù)后臺返回的數(shù)據(jù)在表格中顯示不同內(nèi)容，可以通過以下方式實現(xiàn)

{
    title: '狀態(tài)',
    key: 'status',
    className: 'stustatus',
    render(record) {
      let text = ''
      if (record.status == '0') {
        text = '在讀'
      } else if (record.status == '1') {
        text = '畢業(yè)'
      }
      return h('span', text)//這種渲染方式與渲染按鈕操作一樣必須提供元素模板，但是這里直接這樣寫'span'就可以，而渲染操作按鈕的時候?qū)?n-button'卻會報錯，我也搞不懂，有了解的伙伴可以解釋一下
    }
  },

最后就可以根據(jù)數(shù)據(jù)渲染不同內(nèi)容了

四、不同內(nèi)容顯示不同樣式

項目中表格不同內(nèi)容會顯示不同的樣式，提供以下方式實現(xiàn)

①在表格標(biāo)簽中加上返回樣式的屬性 :row-class-name="rowClassName"

<n-data-table :bordered="false" :single-line="false" :columns="tableHead" :data="tabeldata"
    :row-class-name="rowClassName" />

②定義返回類名的函數(shù)

const rowClassName = (row) => {
  if (row.status == '0') {
    return 'statusin'
  }
  return 'statusout'
}

③在style中寫不同類名對應(yīng)的樣式

:deep(.statusin .stustatus) {
  color: rgba(63, 210, 19, 0.75) !important;
}
:deep(.statusout .stustatus) {
  color: rgba(251, 8, 61, 0.75) !important;
}

④在對應(yīng)列的表頭對象里面加入類名屬性 className: 'stustatus'

{
    title: '狀態(tài)',
    key: 'status',
    className: 'stustatus',
    render(record) {
      let text = ''
      if (record.status == '0') {
        text = '在讀'
      } else if (record.status == '1') {
        text = '畢業(yè)'
      }
      return h('span', text)
    }
  },

最后表格就渲染出來了