基本用法
html
复制代码
<template>
<a-table :columns="columns" :data-source="data">
<template #headerCell="{ column }">
<template v-if="column.key === 'name'">
<span>
xxx Name
</span>
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'name'">
<a>
aaa {{ record.name }}
</a>
</template>
<template v-else-if="column.key === 'tags'">
<span>
<a-tag
v-for="tag in record.tags"
:key="tag"
:color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
>
{{ tag.toUpperCase() }}
</a-tag>
</span>
</template>
<template v-else-if="column.key === 'action'">
<span>
<a>Invite 一 {{ record.name }}</a>
<a-divider type="vertical" />
<a>Delete</a>
<a-divider type="vertical" />
<a class="ant-dropdown-link">
More actions
</a>
</span>
</template>
</template>
</a-table>
</template>
<script setup>
const columns = [
{
name: 'Name',
dataIndex: 'name',
key: 'name',
},
{
title: 'Age',
dataIndex: 'age',
key: 'age',
},
{
title: 'Address',
dataIndex: 'address',
key: 'address',
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
},
{
title: 'Action',
key: 'action',
},
];
const data = [
{
key: '1',
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
tags: ['nice', 'developer'],
},
{
key: '2',
name: 'Jim Green',
age: 42,
address: 'London No. 1 Lake Park',
tags: ['loser'],
},
{
key: '3',
name: 'Joe Black',
age: 32,
address: 'Sidney No. 1 Lake Park',
tags: ['cool', 'teacher'],
},
];
</script>
渲染用户数据
html
复制代码
<script setup>
import {onMounted} from "vue";
import axios from "axios";
const columns = [
{
name: '姓名',
dataIndex: 'name',
key: 'name',
},
{
name: '性别',
dataIndex: 'gender',
key: 'gender',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '电话',
dataIndex: 'phone',
key: 'phone',
},
{
title: '邮箱',
key: 'email',
dataIndex: 'email',
},
{
title: '薪资',
key: 'salary',
dataIndex: 'salary',
},
{
title: '操作',
key: 'action',
},
];
const data = [
{
key: '1',
name: 'John Brown',
gender: "male",
age: 32,
phone: '18811112222',
email: '18811112222@qq.com',
salary: 33333,
},
{
key: '2',
name: 'John Brown',
gender: "male",
age: 32,
phone: '18811112222',
email: '18811112222@qq.com',
salary: 33333,
},
{
key: '3',
name: 'John Brown',
gender: "male",
age: 32,
phone: '18811112222',
email: '18811112222@qq.com',
salary: 33333,
},
];
onMounted(()=>{
axios.get("http://127.0.0.1:8889/zdppy_amuserdetail").then((response) => {
console.log("response.data", response.data);
})
})
</script>
<template>
<a-table :columns="columns" :data-source="data">
<template #headerCell="{ column }">
<template v-if="column.key === 'name'">
<span>
{{ column.name }}
</span>
</template>
<template v-else-if="column.key === 'gender'">
<span>
{{ column.name }}
</span>
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<a-space wrap>
<a-button size="small" type="primary" block>编辑</a-button>
<a-button size="small" block>详情</a-button>
<a-button size="small" danger block>删除</a-button>
</a-space>
</template>
</template>
</a-table>
</template>
渲染后端用户列表数据
html
复制代码
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
const columns = [
{
name: '姓名',
dataIndex: 'name',
key: 'name',
},
{
name: '性别',
dataIndex: 'gender',
key: 'gender',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '电话',
dataIndex: 'phone',
key: 'phone',
},
{
title: '邮箱',
key: 'email',
dataIndex: 'email',
},
{
title: '薪资',
key: 'salary',
dataIndex: 'salary',
},
{
title: '操作',
key: 'action',
},
];
const data = ref([]);
onMounted(()=>{
axios.get("http://127.0.0.1:8889/zdppy_amuserdetail").then((response) => {
console.log("response.data", response.data);
data.value = response.data.data;
})
})
</script>
<template>
<a-table :columns="columns" :data-source="data">
<template #headerCell="{ column }">
<template v-if="column.key === 'name'">
<span>
{{ column.name }}
</span>
</template>
<template v-else-if="column.key === 'gender'">
<span>
{{ column.name }}
</span>
</template>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<a-space wrap>
<a-button size="small" type="primary" block>编辑</a-button>
<a-button size="small" block>详情</a-button>
<a-button size="small" danger block>删除</a-button>
</a-space>
</template>
</template>
</a-table>
</template>