当前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.listlet index = 1list.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.listthis.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.listthis.tableData = list //赋值给 tableData}}}
