• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Vue3 table表格组件的使用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一、Ant Design Vue

在大量数据需要展示时,我们一般都会以报表的形式展现,按照直觉习惯,肯定使用table表格来展示行列数据。

因此,我们要使用Ant Design Vue组件库中的table组件,来进行数据的绑定。

1、官网地址

官网地址:https://2x.antdv.com/components/table-cn#API

2、怎么使用

我们先对电子书管理页面改造,将布局进行调整,

示例代码如下:

<template>
  <a-layout class="layout">
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
      <div class="about">
        <h1>电子书管理页面</h1>
      </div>
    </a-layout-content>
  </a-layout>

 
</template>

效果如下:

3、将电子书表格进行展示

要做的事:

  • 表格渲染
  • slots: 自定义渲染
  • title: 表头渲染
  • customRender: 值渲染

示例代码如下:

<template>
  <a-layout class="layout">
    <a-layout-content
        :style="{ background: '#fff', padding: '24px', minHeight: '280px' }">
      <a-table :columns="columns"
               :data-source="ebooks1"
               :pagination="pagination"
               :loading="loading"
      >
        <template #cover="{ text: cover }">
          <img v-if="cover" :src="cover" alt="avatar"/>
        </template>
        <template #name="{ text: name  }">
          <a>{{ text }}</a>
        </template>
        <template #customTitle>

      <span>
        <smile-outlined/>
        Name
      </span>
          </template>
          <template #action="{ record }">
      <span>
        <a-space size="small">
            <a-button type="primary" @click="edit(record)">
              编辑
            </a-button>
             <a-button type="danger">
                删除
              </a-button>
          </a-space>
      </span>
          </template>
      </a-table>
    </a-layout-content>
  </a-layout>

</template>
<script lang="ts">
import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue';
import {defineComponent, onMounted, reactive, ref, toRef} from 'vue';
import axios from 'axios';

export default defineComponent({
  name: 'AdminEbook',
  setup() {
    const pagination = {
      onChange: (page: number) => {
        console.log(page);
      },
      pageSize: 3,
    };

    const loading = ref(false);
    const columns = [
      {
        title: '封面',
        dataIndex: 'cover',
        slots: {customRender: 'cover'}
      },
      {
        title: '名称',
        dataIndex: 'name'
      },
      {
        title: '分类一',
        dataIndex: 'category1Id',
        key: 'category1Id',
      },
      {
        title: '分类二',
        dataIndex: 'category2Id',
        key: 'category2Id',
      },
      {
        title: '文档数',
        dataIndex: 'docCount'
      },
      {
        title: '阅读数',
        dataIndex: 'viewCount'
      },
      {
        title: '点赞数',
        dataIndex: 'voteCount'
      },
      {
        title: 'Action',
        key: 'action',
        slots: {customRender: 'action'}
      }
    ];
    //使用ref进行数据绑定
    const ebooks = ref();
    // 使用reactive进行数据绑定
    const ebooks1 = reactive({books: []})
    onMounted(() => {
      axios.get("/ebook/list?name=").then(response => {
        const data = response.data;
        ebooks.value = data.content;
        ebooks1.books = data.content;
      })
    })
    return {
      pagination,
      loading,
      columns,
      ebooks1: ebooks,
      ebooks2: toRef(ebooks1, "books")
    }
  },
  components: {
    SmileOutlined,
    DownOutlined,
  },
});
</script>
<style scoped>
img {
  width: 50px;
  height: 50px;
}
</style>

实际效果:

二、总结

对于table组件的使用不是很熟的话,需要不断去尝试,简单说,就是对象属性的映射。

总体感觉下来,还是进行数据绑定后,在进行页面展示,如不是很清晰,请参考这篇《Vue3 列表界面数据展示详情》文章。

到此这篇关于Vue3 table表格组件的使用的文章就介绍到这了,更多相关Vue3 table表格组件内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue3 页面,菜单,路由的使用发布时间:2022-02-05
下一篇:
一篇文章带你了解jQuery动画发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap