【前言】
最近写一个前后端交互的小东西,传回来的数据自带编号(编号不一定是从1开始),有时只传回一个数据,但是它的编号是4,导致很不美观,我希望在不改变数据本身的编号下,自定义排序,让他是1。并且还能对传回来的对象数组,单独处理一个对象,不影响其他的对象
查阅了相关资料,最终得以解决,附上代码
<template>
<el-table :data="tableData">
<el-table-column label="序号" width="100">
<!-- 自定义列内容 -->
<template slot-scope="scope">
{{ scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" :width="column.width">
</el-table-column>
<el-table-column label="操作" width="100">
<!-- 自定义列内容 -->
<template slot-scope="scope">
<el-button type="danger" icon="el-icon-delete" @click="deleteItem(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{ id: 4, name: 'John', age: 25 },
{ id: 5, name: 'Jane', age: 30 },
{ id: 6, name: 'Mark', age: 35 }
],
tableColumns: [
{ prop: 'name', label: 'Name', width: '200' },
{ prop: 'age', label: 'Age', width: '160' },
]
};
},
methods: {
deleteItem(item) {
alert(JSON.stringify(item));
// 处理删除项的逻辑
const index = this.tableData.indexOf(item);
if (index > -1) {
this.tableData.splice(index, 1);
}
}
}
};
</script>