Ant Design Vue数据表格序号

傷城~ 2022-09-10 01:15 460阅读 0赞

参考：[https://blog.csdn.net/qq\_38344500/article/details/105995886][https_blog.csdn.net_qq_38344500_article_details_105995886]

# 核心代码 #

<span slot="num" slot-scope="text, record, index">
                    {
       { (pageParams.page-1) * pageParams.rows + parseInt(index)+1 }}
                </span>

{ 
        title: '序号',
        dataIndex: 'num',
        key: 'num', width: 50,
        align: 'center',
        fixed: true,
        scopedSlots: { 
          customRender: 'num'
        }
      },

# 完整代码 #

<a-table :columns="columns" :data-source="data" :pagination="pagination" :rowKey="(item) => item.id" @change="handleTableChange" :scroll="{x:1500}" bordered >
              	
                <span slot="num" slot-scope="text, record, index">
                    {
       { (pageParams.page-1) * pageParams.rows + parseInt(index)+1 }}
                </span>
                
                <template slot="operation" slot-scope="text,item">
                  <a-button type="primary" size="small" @click="showShow(item)" style="margin-left: 10px; font-size: 10px" >
                    查看
                  </a-button>
                  <a-button disabled @click="cancel(item)" type="danger" size="small" style="margin-left: 10px; font-size: 10px" >
                    撤销
                  </a-button>
                </template>
              </a-table>

const columns = [
      { 
        title: '序号',
        dataIndex: 'num',
        key: 'num', width: 50,
        align: 'center',
        fixed: true,
        scopedSlots: { 
          customRender: 'num'
        }
      },
      { 
        title: "身份证",
        dataIndex: "idcard",
        align: "center",
        width: 250,
      },
      { 
        title: "手机号",
        dataIndex: "tel",
        width: 300,
        align: "center",
      },
      { 
        title: "车牌号",
        dataIndex: "ship",
        width: 300,
        align: "center",
      },
      { 
        title: "车轴类型",
        dataIndex: "trucktype",
        width: 300,
        align: "center",
      },
      { 
        title: "审核类型",
        dataIndex: "state",
        width: 300,
        align: "center",
        customRender: function (val) { 
          if (val === 1) { 
            return "未审核";
          } else if (val === 2) { 
            return "已审核"
          }
        }
      },
      { 
        title: "操作",
        dataIndex: "操作",
        align: "center",
        fixed: "right",
        width: 180,
        scopedSlots: { customRender: "operation"},
      },
    ]
    
    
    export default { 
      components: { 
        edit
      },
      data() { 
        return { 
          pageParams: { 
            ship: '',
            tel: '',
            state: 1, // 1：未审核 2：已审核
            page: 1,
            rows: 10,
          },
          showFlag_list: true,
          showFlag_edit: false,
          loading_sk: false,
          form: { },
          data: [],
          columns,
          pagination: { 
            total: 0,
            current: 1,
            pageSize: 10, //每页中显示10条数据
            showSizeChanger: true,
            pageSizeOptions: [
              "10",
              "20",
              "50",
            ], //每页中显示的数据
            showTotal: (total) => `共有 ${ total} 条数据`, //分页中显示总的数据
          },
        };
      },
      methods: { 
    	// 搜索
        handleSearch() { 
          this.pageParams.page = 1;
          this.loadData();
        },
        // 清空
        handleClear() { 
          this.pageParams.tel = ''
          this.pageParams.ship = ''
          this.loadData();
        },
        // 分页
        handleTableChange(page, pageSize) { 
          this.pageParams.page = page.current;
          this.pageParams.rows = page.pageSize;
          this.loadData();
        },
        // 加载数据
    	loadData() { 
          this.$myapi.api_kj_biz_car.page(this.pageParams).then((response) => { 
            if (response.data.code === 1) { 
              const result = response.data;
              console.log('result:', result)
              this.data = result.data.items;
              this.pagination.pageSize = result.data.rows;
              this.pagination.total = result.data.total;
              this.pagination.current = result.data.page;
              this.pageParams.page = result.data.page;
              this.pageParams.rows = result.data.rows;
            } else { 
              console.log('查询到的数据为空')
            }
          });
        }
    
      }

[https_blog.csdn.net_qq_38344500_article_details_105995886]: https://blog.csdn.net/qq_38344500/article/details/105995886

发表评论取消回复

表情：

评论列表（有 0 条评论，460人围观）

还没有评论，来说两句吧...

相关阅读

相关 ant-design-vue：基础使用

一、环境介绍 vue3+ts+ant-design-vue 二、安装使用 2.1、安装脚手架工具 $ npm install -g @vue/cli

﹏ヽ暗。殇╰゛Y/ 2024年04月01日 09:55/ 0 赞/ 69 阅读

相关 Vue-Ant Design Pro of Vue

[https://blog.csdn.net/gu\_wen\_jie/article/details/90444161][https_blog.csdn.net_gu_wen

爱被打了一巴掌/ 2023年06月27日 05:39/ 0 赞/ 14 阅读

相关 ElmentUI数据表格序号

// 数据表格序号 <el-table-column label="序号" type="index"

男娘i/ 2022年12月27日 07:14/ 0 赞/ 153 阅读

相关 ant-design Table表格添加合计行

文章目录 1：方式一：（比较好维护：推荐） 1：效果图 2：排序数字 3：table 4：data定义

小灰灰/ 2022年11月06日 14:50/ 0 赞/ 1491 阅读

相关 React Ant Design 的表格默认选中

网上的文章基本都是错的，都不能解决Ant design表格默认选中问题，网上大多数搜到的文章都是下面这种：明明 getCheckboxProps 这个就是默认的多选框的配置

àì夳堔傛蜴生んèń/ 2022年11月04日 01:44/ 0 赞/ 251 阅读

相关 Ant Design Vue数据表格序号

参考：[https://blog.csdn.net/qq\_38344500/article/details/105995886][https_blog.csdn.net_qq

傷城~/ 2022年09月10日 01:15/ 0 赞/ 461 阅读

相关 Ant Design Vue 使用-引入 ant-design-vue并且使用

Ant Design Vue 是使用 Vue 实现的遵循 Ant Design 设计规范的高质量 UI 组件库，用于开发和服务于企业级中后台产品。 Ant Design Vu

布满荆棘的人生/ 2022年09月06日 10:19/ 0 赞/ 552 阅读

相关 Vue-Ant Design Pro of Vue-数据表格组件S-Table的使用(一)

Table 表格是我们平时在中后台系统中用到最多的组件之一了。在Ant Design Vue中，官方提供了一个[Table 表格][Table]组件。我们先来介绍一下这个组件

超、凢脫俗/ 2022年04月25日 08:24/ 0 赞/ 4628 阅读

相关 Vue-Ant Design Pro of Vue

Ant Design Pro of Vue 本来呢是想写一些关于[Ant Design Vue][]的文章，不过恰好用到了一个开源的基于Ant Design Vue 开发

雨点打透心脏的1/2处/ 2022年01月29日 15:55/ 0 赞/ 261 阅读

相关 Vue-Ant Design Pro of Vue-数据表格组件S-Table的使用(二)

在之前的一篇文章中，对S-Table组件的的数据加载和数据渲染，以及分页参数的使用进行了描述： > [https://blog.csdn.net/gu\_wen\_jie/a

ゝ一纸荒年。/ 2021年12月12日 13:39/ 0 赞/ 400 阅读