vue3调用ant-design-vue组件库的a-table组件

一.安装依赖

npm  i ant-design-vue

二.main.ts引入使用

import AntDesign from "ant-design-vue";
import "ant-design-vue/dist/antd.css";app.use(AntDesign)

三.页面调用

<template><div class="layout-padding"><div class="layout-padding-view layout-padding-auto"><a-table :columns="filterColumn" :data-source="dataSource" :pagination="pagination" style="overflow: auto;"><template #bodyCell="{ column, record }"><template v-if="column.dataIndex === 'deviceid'"><span style="color: #66b1ff;">{{ record.deviceid }}</span></template><template v-if="column.key === 'action'"><a-button type="primary" :disabled="record.status === 1 ? true : false">按钮1</a-button><a-divider type="vertical" /><a-button type="primary" danger>按钮2</a-button></template><template v-if="column.key === 'status'"><a-tag color="green" v-if="record.status === 1">已处理</a-tag><a-tag color="red" v-if="record.status === 0">未处理</a-tag></template></template><template #customFilterDropdown="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"><a-card><a-checkbox-group :options="checkColumn" v-model:value="checkValue" @change="checkChange" /></a-card></template></a-table></div></div>
</template><script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, getCurrentInstance, computed } from 'vue';export default defineComponent({setup() {// 页面加载时onMounted(() => {init()});const { proxy }: any = getCurrentInstance();const onPageChange = (page: number, val: number) => {data.pagination.current = page;data.pagination.pageSize = val;init()}const data = reactive({pagination: {current: 1,pageSize: 10,total: 0,onChange: onPageChange, //点击页码事件showTotal: (total: number) => `共${total}条数据`, // 展示总共有几条数据buildOptionText: (pageSizeOptions: { value: string }) => `${pageSizeOptions.value}条/页`,},columns: [{title: '序号', type: 'index', width: 60, align: 'center', dataIndex: 'index', customRender: ({ index }: any) => index + 1},{ title: '设备号码', dataIndex: 'deviceid', key: 'deviceid', },{title: '设置值/报警值', dataIndex: 'fault_value', customRender: ({ record }: any) => {let value = `${Number(record.value_set) || '-'}/${Number(record.fault_value) || '-'}`if (!Number(record.value_set) && !Number(record.fault_value)) {value = '-'}return value}},{ title: '报警时间', dataIndex: 'send_time', key: 'send_time' },{ title: '状态', dataIndex: 'status', key: 'status', },{ title: '操作', dataIndex: 'action', key: 'action', minWidth: 230, customFilterDropdown: true }],// 数据dataSource: [],// 初始备份的表格列配置描述及过滤后的容器filterColumn: [] as any[],checkValue: ['index', "deviceid", "fault_value", "send_time", "status", "action"],});const init = async () => {let params = {page: data.pagination.current, pageSize: data.pagination.pageSize,} as any;let res = await proxy.apis.alarminfoLists(params);if (res.code === 200) {data.dataSource = res.data.list || [];data.pagination.total = res.data.page.total;}};// 选择框使用的数据const checkColumn = computed(() => {return data.columns.map((item) => {if (item.dataIndex === "action" || item.dataIndex === "index") {return { label: item.title, value: item.dataIndex, disabled: true };}return { label: item.title, value: item.dataIndex };});});function filterAction(value: Array<string>) {return data.columns.filter((item) => {if (value.includes(item.dataIndex)) {// 为true时，循环遍历的值会暴露出去return true;}return false;});}data.filterColumn = filterAction(data.checkValue);const checkChange = (checked: Array<string>) => {const filterValue = filterAction(checked);data.filterColumn = filterValue;};return {...toRefs(data),checkChange,checkColumn,onPageChange,};},
});
</script><style scoped lang="scss"></style>

效果图