Vue3+NaiveUi之数据表格<n-data-table>

效果图

1、基础表格

2、多选与单选配置，multiple默认多选

示例Code

// step1
const rowKey = (row: typeObject) => row.userCode

// step2
createColumns新增{ type: 'selection' }
createColumns新增{ type: 'selection',multiple: false } 加上multiple属性变单选

//step3
const selectRows = (row: typeObject) => {
    console.log('行选：:',row); 
}

3、配置固定列，如固定多选列

createColumns新增{ type: 'selection',fixed: 'left' }或

{ title: '用户编号', key: 'userCode',fixed: 'left' }

调用页面

<template>
   <CurrencyTable
        :tableColunm="columns"
        :tableDataList="tableDataList" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import CurrencyTable from '../components/CurrencyTable.vue';
import API from '../config/apiService';
import { QueryUserList } from '../config/requestPath';
import type { DataTableColumns } from 'naive-ui'

type typeObject = {
    userCode: String,
    userName: String,
    phone: String,
    email: String
}

const rowKey = (row: typeObject) => row.userCode
const createColumns = ({}: {}):DataTableColumns<typeObject> => {
    return [
        { type: 'selection' },
        { title: '用户编号', key: 'userCode' },
        { title: '用户名', key: 'userName' },
        { title: '手机号', key: 'phone' },
        { title: '邮箱', key: 'phone' }
    ]
}

const columns = createColumns({})
let tableDataList = ref([])


const selectRows = (row: typeObject) => {
    console.log('行选：:',row); 
}

const queryPage = () => {
    API.get(QueryUserList, {}).then(res => {
        console.log('表格数据源====', res)
        tableDataList.value = res.data && res.data.length ? res.data : []
    })
}
queryPage();
</script>

封装表格属性说明

1 tableColunm：表头数据

2 tableDataList：表数据

3 bordered：边框表格

4 多选配置

step1
:rowKey="rowKey"
@update:checked-row-keys="handleCheck"

step2
入参defineProps 新增 rowKey?: any,

step3
选择事件暴露与调用
import type { DataTableRowKey } from 'naive-ui'
const emit = defineEmits([ 'checkedRowList'])
const handleCheck = (rowKeys: DataTableRowKey[]) => {
    emit('checkedRowList', rowKeys)
}

5、固定表头

增加表格最大高度达到固定表头的效果。设置:max-height="tableHeight"

//使用计算，使表格自适应
const screenHeight = document.documentElement.clientHeight || window.innerHeight
const tableHeight = screenHeight - 240

6 表格尺寸：size="small"，【'small' | 'medium' | 'large'】默认medium。

表格组件

<template>
<n-data-table 
   size="small"
   :columns="tableColunm" 
   :data="tableDataList" 
   :bordered="true"
   :max-height="tableHeight"
   :rowKey="rowKey"
    @update:checked-row-keys="handleCheck"
 />
</template>

<script setup lang="ts">
defineProps<{
    tableColunm: Array<{}>,
    tableDataList: Array<{}>
}>()
</script>