vue 动态渲染表格序号列

当前demo用的是 Vue + Ant Design Vue 框架的，如果用的是Element-UI 应该也是差不多的原理。

总结三种方法：

第一种：动态在表格数据添加一个index 序号字段
template：

   <template>
   <div class="table-list">
      <a-table 
      :columns="columns" 
      :data-source="tableData" 
      :locale='{emptyText:"暂无数据"}' 
      :pagination="false"
      :scroll="{ x: 1300 }">
      </a-table>
    </div>
   </template>

script：

 
 export default {
  data() {
      return {
        columns: [
        {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
        },
        {
          title: '商品名称',
          dataIndex: 'skuName',
          key: 'skuName',
          ellipsis: true,
        }
      ],
      tableData: [],
 
      
    },
    mounted(){
      this.getList()
    },
   methods:{
      // 获取表格数据
      async getList(){
        let res = await getBaseGoodsList(); //调接口获取列表数据
        let list = res.data.result.list
        let index = 1
        list.map(item => {       //循环添加index 
          item.index =  index++
        })
        this.tableData = list   //赋值给 tableData
      }
   }
  }

第二种：使用table插槽的进行序号的动态写入

template：

   <template>
   <div class="table-list">
      <a-table 
      :columns="columns" 
      :data-source="tableData" 
      :locale='{emptyText:"暂无数据"}' 
      :pagination="false"
      :scroll="{ x: 1300 }">
         // 序号通过插槽的index来写入序号，text当前值，record当前行，index索引
         <span slot="index" slot-scope="text, record, index">
           {{++index}}
         </span>
         //操作也是同理
         <span slot="action" slot-scope="text, record">
          <a-button type="link" @click="goEditPage(record)">编辑</a-button>
        </span>
      </a-table>
    </div>
   </template>

script：

 
 export default {
  data() {
      return {
        columns: [
         {
          title: '序号',
          dataIndex: 'index',
          key: 'index',
          scopedSlots: { customRender: 'index' },
        },
        {
          title: '商品名称',
          dataIndex: 'skuName',
          key: 'skuName',
          ellipsis: true,
        },
        {
          title: '操作',
          key: 'action',
          fixed: 'right',
          width: 100,
          scopedSlots: { customRender: 'action' },
        }
      ],
      tableData: [],
 
      
    },
    mounted(){
      this.getList()
    },
   methods:{
      // 获取表格数据
      async getList(){
        let res = await getBaseGoodsList(); //调接口获取列表数据
        console.log('列表数据',res.data.result.list)
        let list = res.data.result.list
        this.tableData = list   //赋值给 tableData
      }
   }
  }

第三种：使用Ant Design Vue table API 的customRender 函数，也是代码最少的写法，依赖Ant Design Vue

template：

   <template>
   <div class="table-list">
      <a-table 
      :columns="columns" 
      :data-source="tableData" 
      :locale='{emptyText:"暂无数据"}' 
      :pagination="false"
      :scroll="{ x: 1300 }">
      </a-table>
    </div>
   </template>

script：

 
 export default {
  data() {
      return {
        columns: [
        {
          title:'序号', 
          // text当前值，record当前行，index索引
          customRender: (text, record, index) => `${index + 1}`
        },
        {
          title: '商品名称',
          dataIndex: 'skuName',
          key: 'skuName',
          ellipsis: true,
        }
      ],
      tableData: [],
 
      
    },
    mounted(){
      this.getList()
    },
   methods:{
      // 获取表格数据
      async getList(){
        let res = await getBaseGoodsList(); //调接口获取列表数据
        console.log('列表数据',res.data.result.list)
        let list = res.data.result.list
        this.tableData = list   //赋值给 tableData
      }
   }
  }