vue3 vxe-table表格

npm install xe-utils vxe-table@next

:VXETable

import {
	createApp
} from 'vue'
import * as VueRouter from 'vue-router';
import {
	createStore
} from 'vuex'

import 'element-plus/dist/'
import ElementPlus from 'element-plus'

import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/'


import App from './'
import Product from './products/'
import Merchands from './merchands/'
import Apple from './appstore/'
import Table from './table/'

const routes = [{
		path: '/',
		component: Product
	},
	{
		path: '/m',
		component: Merchands
	},
	{
		path: '/a',
		component: Apple
	},
	{
		path: '/t',
		component: Table
	},
]
const router = ({
	// 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
	history: (),
	routes, // `routes: routes` 的缩写
})

const store = createStore({
	state() {
		return {
			count: 0
		}
	},
	mutations: {
		increment(state) {
			++
		}
	}
})

var app = createApp(App);
(router);
(store);
(ElementPlus);
(VXETable);

// 屏蔽错误信息
 = () => null;
// 屏蔽警告信息
 = () => null;

('#app');

table/

<template>
	<vxe-toolbar>
		<template #buttons>
			<vxe-button @click="allAlign = 'left'">居左</vxe-button>
			<vxe-button @click="allAlign = 'center'">居中</vxe-button>
			<vxe-button @click="allAlign = 'right'">居右</vxe-button>
		</template>
	</vxe-toolbar>

	<vxe-table :align="allAlign" :data="tableData1">
		<vxe-column type="seq" width="60"></vxe-column>
		<vxe-column field="name" title="Name"></vxe-column>
		<vxe-column field="sex" title="Sex"></vxe-column>
		<vxe-column field="age" title="Age"></vxe-column>
	</vxe-table>

</template>

<script>
	import {
		defineComponent,
		ref
	} from 'vue'

	export default defineComponent({
		setup() {
			const allAlign = ref(null)

			const tableData1 = ref([{
					id: 10001,
					name: 'Test1',
					role: 'Develop',
					sex: 'Man',
					age: 28,
					address: 'test abc'
				},
				{
					id: 10002,
					name: 'Test2',
					role: 'Test',
					sex: 'Women',
					age: 22,
					address: 'Guangzhou'
				},
				{
					id: 10003,
					name: 'Test3',
					role: 'PM',
					sex: 'Man',
					age: 32,
					address: 'Shanghai'
				},
				{
					id: 10004,
					name: 'Test4',
					role: 'Designer',
					sex: 'Women',
					age: 24,
					address: 'Shanghai'
				}
			])

			return {
				allAlign,
				tableData1
			}
		}
	})
</script>

<style>
</style>

官方文档：vxe-table v4