zdppy+vue3+antd 实现表格数据渲染

基本用法

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: '[email protected]',
    salary: 33333,
  },
  {
    key: '2',
    name: 'John Brown',
    gender: "male",
    age: 32,
    phone: '18811112222',
    email: '[email protected]',
    salary: 33333,
  },
  {
    key: '3',
    name: 'John Brown',
    gender: "male",
    age: 32,
    phone: '18811112222',
    email: '[email protected]',
    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>