关于 el-table-column type属性_el-table-column属性

element el-table-column type ：

在开发过程中 有些时候前端id无意义而又需要前端展示id 此时可以使用 type = ‘index’ 实现

例：

 <el-table border :data="tableData" style="width: 100%">
   <el-table-column width="80" align="center" label="序号" type='index'></el-table-column>
  </el-table>
1
2
3

data:()=>{
	return {
		tableData:[
		...datas//随便自定义一些数据
		]
	}
}
1
2
3
4
5
6
7

效果：

问题：

解决方案：

方法1：使用slot 获取 每 row 数据的 index 进行计算

<el-table border :data="tableData" style="width: 100%">
   <el-table-column width="80" align="center" label="序号" type='index'>
   	 <template slot-scope="{$index}">
   	 	<span style="margin-left: 10px">{{ (currentPage-1)*pageSize+($index+1) }}</span>
     </template> 
   </el-table-column>
  </el-table>     
1
2
3
4
5
6
7

data:()=>{
	return {
		tableData:[
		...datas//随便自定义一些数据
		],
		pageSize:10,//数据更据翻页改变
		currentPage:1//数据更据翻页改变
	}
}
1
2
3
4
5
6
7
8
9

效果：

方法2：自定义id

<el-table border :data="tableData" style="width: 100%">
   <el-table-column width="80" align="center" label="序号" prop='id'></el-table-column>
 </el-table>     
1
2
3

data:()=>{
	return {
		tableData:[
		...datas//随便自定义一些数据
		],
		pageSize:10,//数据更据翻页改变
		currentPage:1//数据更据翻页改变
	}
}
methods:{
	initDate(){
		this.tableData.map((item,index)=>{
		let obj = {}
		const key ={...item}//表字段
		obj.id = (this.currentPage-1)*this.pageSize+index+1
		Object.keys(key).forEach((val)=>{
			obj[item] = val[item]
		})
		return this.tableData.push(obj)
		})
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

效果：