Ant Design Vue数据表格序号

傷城~ 2022-09-10 01:15 490阅读 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 条评论，490人围观）

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

相关阅读

相关 ant design vue表格列表时间截取

方法一：需要引包 import moment from 'moment' { title:'

本是古典何须时尚/ 2023年10月01日 12:03/ 0 赞/ 19 阅读

相关 ant-design-vue 实现表格内部字段验证

ant-design-vue 实现表格内表单字段验证表格内 `column` 可输入的需求还是很常见的，尤其有一些业务场景就是表单内部有一个表格，然后表格的某些列是个进

╰半橙微兮°/ 2023年06月22日 09:27/ 0 赞/ 5 阅读

相关修改Ant Design Vue树形表格的展开图标样式

1. a-table标签里定义 :expandIcon=“expandIcon” 方法 <a-table :scroll="{y: dataSource.rows

快来打我*/ 2023年03月01日 03:15/ 0 赞/ 23 阅读

相关【ant-design-vue】树形表格数据，实现父子关联选择

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Dear 丶/ 2023年02月26日 15:22/ 0 赞/ 164 阅读

相关 ElmentUI数据表格序号

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

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

相关 Ant Design of Vue —— Table表格组件 —— 设置动态表头

需求：表格的表头，需要动态改变效果图 ![在这里插入图片描述][2021032613303349.gif_pic_center] 方法动态改变colum

浅浅的花香味﹌/ 2022年10月22日 09:10/ 0 赞/ 18 阅读

相关 Ant Design Vue数据表格序号

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

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

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

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

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

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

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

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

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

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

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