vue-cli3.0+antd+table+分页序号

前言：

        项目需要，使用antd的框架，之后会发更多资料，这里是antd的表格中需要序号，可是他自身又没有直接的，所以需要我们给他加一下

实现效果：

实现步骤：

第一：下载安装antd，这里就不详细说了，入口：（暂无）

第二：使用它的table功能

 

下面贴一下完整组件代码：antd_table.vue

<template>
  <div>
      <a-table  :rowSelection="rowSelection" :dataSource="dataSource" :columns="columns" :pagination='pagination' @change='tableChange'>
        <div slot="operation" slot-scope="operation">
            <a href="javascript:;">修改</a><span> | </span>
            <a href="javascript:;">查看</a><span> | </span>
            <a href="javascript:;">删除</a>
        </div>
      </a-table>
 </div>
</template>

<script>

export default {
  props: {

  },
  data () {
    return {
      /**
       * 分页器属性
       */
      pagination:{
        current:1,//当前页数 v-model
        defaultCurrent:1,//默认的当前页数
        defaultPageSize:3,//每页显示几条数据
        showQuickJumper:false,//是否显示直通车
        total:5,//总数
      },
      /**
       * table数据
       */
      dataSource: [
          {
            key: '0',
            name: '设备1',
            age: '32',
            address: 'London, Park Lane no. 0',
          },
          {
            key: '1',
            name: '设备2',
            age: '32',
            address: 'London, Park Lane no. 1',
          },
          {
            key: '3',
            name: '设备3',
            age: '32',
            address: 'London, Park Lane no. 1',
          },
          {
            key: '4',
            name: '设备4',
            age: '32',
            address: 'London, Park Lane no. 1',
          },
          {
            key: '5',
            name: '设备5',
            age: '32',
            address: 'London, Park Lane no. 1',
          },
        ],
        /**
         * 列值
         */
        columns: [
          {
            title:'序号',
            width:80,
             customRender:(text,record,index)=>`${(this.pagination.current-1)*this.pagination.defaultPageSize + (index+1)}`
            // render ==> customRender
          },
          {
            title: '设备名称',
            dataIndex: 'name',
          },
          {
            title: '操作',
            dataIndex: 'operation',
             scopedSlots: { customRender: 'operation' },
          },
        ],
    };
  },

  components: {},

  computed: {
    /**
     * 全选
     */
      rowSelection() {
        const { selectedRowKeys } = this;
        return {
          onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
          },
        };
      },
  },

  created() {},

  mounted() {},

  methods: {
    /**
     *  分页、排序、筛选变化时触发
     */
    tableChange(pagination, filters, sorter){
      this.pagination = pagination;
    }
  },

  watch: {}
}

</script>
<style lang='less' scoped>

</style>