ant-design-vue 组件文档

https://www.antdv.com/components/overview-cn

相关的视频：https://www.bilibili.com/video/BV1aG4y1k7kB/?spm_id_from=333.337.search-card.all.click

b站antdv-pro视频：https://www.bilibili.com/video/BV1vL411d7PW?p=23&vd_source=5f6653b0e7fc3c45af50cd854bea3ee5

项目地址：https://github.com/antdv-pro/antdv-pro

国内镜像：https://gitee.com/antdv-pro/antdv-pro

项目文档：https://docs.antdv-pro.com/

预览地址：https://www.antdv-pro.com/

组件文档：https://antdv.com/

少废话，直接上代码：

<template>
  <a-config-provider :locale="zhCN">
    <a-table
        :columns="fixedColumns"
        :data-source="fixedData"
        :pagination="ipagination"
        :scroll="{ x: 2000, y: 500 }"
        bordered
        @change="changePage"
    >
      <template v-slot:bodyCell="{ column, record, index}">
        <template v-if="column.dataIndex === 'thumb'">
          <img style="width:50px;heigth:50px" :src="record.thumb" />
        </template>
      </template>
    </a-table>
  </a-config-provider>
  <div>
  </div>

</template>
<script lang="ts" setup>
import type { TableColumnsType } from 'ant-design-vue';
import {onMounted, ref, reactive} from 'vue';
import {getPage} from '../../api/article'
import zhCN from "ant-design-vue/es/locale/zh_CN";
import {message} from "ant-design-vue";
//ant-design-vue自带，只需要引入

const fixedColumns = ref<TableColumnsType>([
  {
    title: 'id',
    dataIndex: 'id',
    fixed: true,
    width: 80,
  },
  {
    title: '文章标题',
    dataIndex: 'title',
    fixed: true,
    width: 100,
  },
  {
    title: '文章图标',
    dataIndex: 'thumb',
    fixed: true,
    width: 100,
    key: 'pic',
    // slots: { customRender: 'pic' },
  },
  {
    title: '简介',
    dataIndex: 'introduction',
    fixed: true,
    width: 100,
  },
  {
    title: '标签',
    dataIndex: 'title',
    fixed: true,
    width: 100,
  },
  {
    title: '作者',
    dataIndex: 'title',
    fixed: true,
    width: 100,
  },
  {
    title: '创作时间',
    dataIndex: 'title',
    fixed: true,
    width: 100,
  },
  {
    title: '更新时间',
    dataIndex: 'title',
    fixed: true,
    width: 100,
  },
  {
    title: '是否置顶',
    dataIndex: 'title',
    fixed: true,
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'title',
    fixed: true,
    width: 100,
  },
  {
    title: '操作',
    dataIndex: 'description',
  },
]);

const fixedData = ref<{
  key: number; id:number; title: string;
  thumb:string; description: string
  introduction:string;
}[]>([]);

//分页参数
const ipagination=reactive({
      size:'large',
      current: 1,
      pageSize: 10,
      total: 0,
      position: ['bottomLeft'],
      pageSizeOptions: ['10', '20', '30'],//可选的页面显示条数
      showTotal: (total) => {
        return " 共" + total + "条"
      }, //展示每页第几条至第几条和总数
      hideOnSinglePage: false, // 只有一页时是否隐藏分页器
      showQuickJumper:true, //是否可以快速跳转至某页
      showSizeChanger: true, //是否可以改变pageSize
});

const changePage = (pagination)=> {
  let para = {"currentPage":pagination.current,"pageSize":pagination.pageSize}
  getPage(para).then((res) => {
    const {code} =  res.data
    console.log(res.data)
    if (code != '0') {
      const {msg} =  res.data
      message.error(msg)
      return;
    }
    const {currentPage,pageSize,totalCount} =  res.data.result
    const {result} =  res.data
    ipagination.current = currentPage
    ipagination.pageSize = pageSize
    ipagination.total = totalCount
    fixedData.value = result.list
  })
}

onMounted(()=> {
  changePage(ipagination);
})

</script>
<style>
#components-table-demo-summary tfoot th,
#components-table-demo-summary tfoot td {
  background: #fafafa;
}
[data-theme='dark'] #components-table-demo-summary tfoot th,
[data-theme='dark'] #components-table-demo-summary tfoot td {
  background: #1d1d1d;
}
</style>

一个switch问题：

前端问题集（1）：Ant Design Vue 中 switch 实现前端修改用户状态不需要重新请求后台数据

2023-08-29 start

中国色网站：

http://zhongguose.com/

end

2024-06-28 start

安装pinia持久化插件：

npm install pinia-plugin-persistedstate

在main.ts(js)中使用：

import {createApp} from 'vue'
import './style.css'
import App from './App.vue'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/reset.css';
import router from './router/router'
import {createPinia} from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const pinia = createPinia()
pinia.use(piniaPluginPersistedstate);


const app = createApp(App);



app.use(Antd).use(router).use(pinia).mount('#app');

在仓库中使用：

import { defineStore } from 'pinia';
import { ref } from 'vue'; 

export const useTabsStore = defineStore('tabs', ()=>{

    const tabs = ref([]);

    // 选择的key
    const activeKey = ref("");

    const addTab = (tab) =>{
        tabs.value.push(tab);
    }

    function findIndexByKeyValue(array, key, value) {
        return array.findIndex(item => item[key] === value);
      }

    const removeTab = (tab)=>{
        if (tabs.value.length === 0 || tabs.value.length === 1) {
            return;
        }
        const index = findIndexByKeyValue(tabs.value,"key",tab);
        if (index !== -1) {
            tabs.value.splice(index, 1);
            activeKey.value = tabs.value[0].key
        }
    }

    return {
        tabs,
        addTab,
        activeKey,
        removeTab
    };
},
    {
        persist:{
            enable:true
        }
    }
);

end