Antd+vue table分页序号倒序排序/分页序号递增

最近在使用ant design vue框架的table组件进行数据展示时,有个序号倒序排序的需求,下面是实现的效果图;
在这里插入图片描述在这里插入图片描述

  1. 倒序主要代码:在Column中加入以下代码,
    ipagination.total:列表数据总条数
    ipagination.current:当前页
    ipagination.pageSize:每页条数(我这是50条)
 customRender: function (t, r, index) {
            return ipagination.total - (((ipagination.current - 1) * ipagination.pageSize) + Number(index))
          },
  1. 每页序号递增主要代码:在Column中加入以下代码,
    ipagination.total:列表数据总条数
 customRender: function (t, r, index) {
            return parseInt(ipagination.total) - parseInt(index)
          },

以下是详细代码:

<template>
<a-table
                      ref="table"
                      size="middle"
                      :scroll="{ x: 1620, y: 470 }"
                      bordered
                      rowKey="id"
                      :columns="columns"
                      :dataSource="dataSource"
                      class="j-table-force-nowrap ant-table"
                      :loading="loading"
                      :pagination="ipagination"
                      @change="handleChange1"
                    ></a-table>
</template>

<script>
export default {
data() {
    return {
    //分页数据
    ipagination:{
        current: 1, //当前页
        pageSize: 50, //每页数量
        pageSizeOptions: ['50'],
        //分页右下角总条数那的数据
        showTotal: (total, range) => {
          // return range[0] + "-" + range[1] + " 共" + total + "条"   //序号递增时的显示
          //序号倒序
          let currSize = this.ipagination.total - ((this.ipagination.current - 1)*this.ipagination.pageSize);
          return  currSize + '-' + (currSize > 50 ? currSize - 49 : 1) +" 共" + total + "条"
        },
        showQuickJumper: true,
        showSizeChanger: true,
        total: 0  //总数
      },
    }
    }created() {
    this.loadData(1);
  },

computed: {
 columns() {
 let { ipagination } = this;
		{
          fixed: 'left',
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 50,
          align: 'center',
          customRender: function (t, r, index) {
            // return parseInt(ipagination.total) - parseInt(index)   //序号递增
            //序号倒序
            return ipagination.total - (((ipagination.current - 1) * ipagination.pageSize) + Number(index))
          },
        },
     }
},

methods: {
//改变页数
handleChange1(pagination, filters, sorter) {
      this.ipagination = pagination;
      this.loadData();
    },
    
    //获取接口数据
loadData(arg) {
      //加载数据 若传入参数1则加载第一页的内容
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      this.loading = true;
      getAction('/list', '').then((res) => {
        if (res) {
            this.dataSource = res.result.records
            if(res.result.searchCount)
            {
              this.ipagination.total = res.result.total
            }else{
              this.ipagination.total = 0;
            }
          }
        }else{
          this.$message.warning("查询失败")
        }
      }).finally(() => {
        this.loading = false
      })
    },
}

}
</script>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在前端使用Vue3实现自动滚动的功能,你可以使用Vue提供的`ref`和`watch`属性来实现。首先,你需要给聊天消息列表的容器元素添加一个`ref`属性,以便在Vue组件中引用该元素。接下来,你可以使用`watch`属性来监视聊天数据的变化,并在数据变化时执行滚动到底部的操作。 以下是一个示例代码: ```html <template> <div ref="chatContainer" class="chat-container"> <!-- 聊天消息列表 --> <ul> <li v-for="message in chatMessages" :key="message.id">{{ message.content }}</li> </ul> </div> </template> <script> import { ref, watch, nextTick } from 'vue'; export default { data() { return { chatMessages: [], // 聊天消息数组 }; }, mounted() { // 监听聊天消息数组的变化 watch( () => this.chatMessages, () => { this.scrollToBottom(); } ); }, methods: { // 滚动到底部 scrollToBottom() { nextTick(() => { this.$refs.chatContainer.scrollTop = this.$refs.chatContainer.scrollHeight; }); }, }, }; </script> ``` 在这个示例中,我们先使用`ref`创建了一个名为`chatContainer`的引用,然后在`mounted`钩子函数中使用`watch`来监听`chatMessages`数组的变化。当数组发生变化时,我们调用`scrollToBottom`方法来实现滚动到底部的效果。在`scrollToBottom`方法中,我们使用`nextTick`来确保在DOM更新后执行滚动操作,然后将`scrollTop`属性设置为`scrollHeight`,从而实现滚动到底部的效果。 希望这个示例能帮助到你实现前端Vue3自动滚动的功能。<span class="em">1</span>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值