当前位置: 首页 > 工具软件 > List Template > 使用案例 >

Ant Design Vue 中的List组件(渲染列表加分页加进度条)

仲孙超
2023-12-01
<template>
  <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="myClass">
    <template #renderItem="{ item }">
      <div class="myclass-div">
        <a-list-item>
          <a-list-item-meta>
            <template #avatar>
              <div class="coverImg">
                <es-upload-img :value="item.CoverFileId" :showImgStyle="{}" disabled />
              </div>
            </template>
            <template #title>
              <div>
                <span class="className-link" v-html="item.searchText"></span>
              </div>
              <div style="width: 905px">
                <div class="content-div">
                  <div style="width: 155px">
                    <span>负责人:</span>
                    <span class="font-block">{{ item.Manager }}</span>
                  </div>
                  <div>
                    <span>有效期:</span>
                    <span class="font-block">
                      {{ item.BeginTime }}
                      至
                      {{ item.EndTime }}
                    </span>
                  </div>
                </div>
             //进度条
                <div style="width: 500px">
                  <a-progress
                    :percent="item.TotalLearningTime * 100"
                    :format="progressFormat(parseInt(item.TotalLearningTime * 1000) / 10.0)"
                  />
                </div>
              </div>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </div>
    </template>
  </a-list>
</template>

<script>
import { getMySubjects } from '@/api/subject/student/subject';
import moment from 'moment';

export default {
  name: 'List',
  data() {
    return {
      pagination: {
        onShowSizeChange: (current, pageSize) => this.onSizeChange(current, pageSize),
        onChange: (page, pageSize) => this.onPageChange(page, pageSize),
        pageSize: 1,
        current: 1,
        total: 0,
        showSizeChanger: true,
        size: 'default',
        sortType: 'EndTime',
        sortField: 'asc',
      },
      myClass: [],
    };
  },
  computed: {
    pageInfo() {
      const thisInfo = this;
      return {
        isPage: true,
        pageSize: thisInfo.pagination.pageSize,
        currentPageIndex: thisInfo.pagination.current - 1,
        sortField1: 'EndTime',
        SortType1: 'asc',
      };
    },
  },

  mounted() {
    this.loadSpecial();
  },

  methods: {
    onPageChange(page) {
      this.pagination.current = page;
      this.loadSpecial();
    },
    onSizeChange(current, pageSize) {
      this.pagination.current = 1;
      this.pagination.pageSize = pageSize;
      this.loadSpecial();
    },
    progressFormat(studyProgress) {
      return () => '学习进度:' + studyProgress + '%';
    },
    loadSpecial(Name) {
      const _this = this;
      let data = {
        searchText: Name,
      };
      getMySubjects(_this.pageInfo, data).then(res => {
        console.log(res.List);
        res.List?.forEach(item => {
          item.searchText = this.brightenKeyword(item.Name, Name);
          item.BeginTime = moment(item.BeginTime).format('YYYY-MM-DD HH:mm');
          item.EndTime = moment(item.EndTime).format('YYYY-MM-DD HH:mm');
        });
        _this.myClass = res.List;
        _this.pagination.total = res.TotalCount;
      });
    },
//模糊搜索(搜索到字变色)
    brightenKeyword(val, keyword) {
      if (keyword != undefined) {
        if (keyword.length > 0) {
          val = val.replace(
            new RegExp(keyword, 'i'),
            '<font color="#f75353">' + keyword + '</font>',
          );
          return val;
        } else {
          return val;
        }
      } else {
        return val;
      }
    },
  },
};
</script>

<style lang="less" scoped>

</style>

 类似资料: