<el-table-column label="序号" type="index" width="50" align="center"></el-table-column>序号现实的数字如何不受分页影响
时间: 2023-07-06 07:29:29 浏览: 51
如果你想让序号不受分页影响,可以使用 `:index` 属性,该属性接收一个函数作为参数。函数的参数有三个:`row` 行数据,`column` 列数据和 `index` 当前行的索引值。你可以在函数中通过计算来返回真实的序号值,例如:
```
<el-table-column label="序号" :index="getIndex" width="50" align="center"></el-table-column>
```
```
methods: {
getIndex(row, column, index) {
return index + 1;
}
}
```
这样就可以让序号不受分页影响,始终显示真实的序号值。
相关问题
<el-table :data="membersList" style="width: 100%"> <el-table-column type="index" label="序号" align="center" width="80"></el-table-column> <el-table-column label="考勤人员" align="center"> <el-table-column label="姓名" prop="memberName" align="center"></el-table-column> <el-table-column label="岗位" prop="post" align="center"></el-table-column> </el-table-column> <el-table-column label="出勤天数" prop="attendanceDays" align="center"></el-table-column> <el-table-column label="岗位系数" prop="postFactor" align="center"></el-table-column> <el-table-column label="调整系数" align="center"> <template slot-scope="scope"> <div> <el-input-number v-model="scope.row.adjustFactor" :precision="2" :step="0.01" :max="0.15" :min="-0.15" size="small" @change="changeFinal(scope.row)" ></el-input-number> </div> </template> </el-table-column> <el-table-column label="最终考勤天数" prop="finalDavs"></el-table-column> </el-table> <div class="membersDays"> <span>合计</span> <span>{{membersDaysJs}}</span>天 </div>computed: { membersDaysJs() { let num = 0; this.membersList.forEach(item => { if (item.finalDavs > 0) { num += item.finalDavs; } }); console.log(num); return num; } },
根据您提供的代码,我发现您的`computed`选项写在了模板的后面,而不是Vue组件的选项中。您应该将`computed`选项移到Vue组件的选项中,像这样:
```
<template>
<div>
<el-table :data="membersList" style="width: 100%">
<!-- 表格列定义 -->
</el-table>
<div class="membersDays">
<span>合计</span>
<span>{{membersDaysJs}}</span>天
</div>
</div>
</template>
<script>
export default {
data() {
return {
// 数据定义
};
},
computed: {
membersDaysJs() {
let num = 0;
this.membersList.forEach(item => {
if (item.finalDavs > 0) {
num += item.finalDavs;
}
});
console.log(num);
return num;
}
},
methods: {
// 方法定义
}
};
</script>
```
这样应该可以解决computed不生效的问题。
<el-table-column label="序号" width="60" align="center"> <template slot-scope="scope"> <span>{{scope.$index + 1}}</span> </template> </el-table-column>中,scope的数据从哪里来?
在 Vue 中,使用 slot-scope 或 v-slot 指令定义的插槽,会将当前组件的作用域中的数据传递给插槽内部。在 el-table-column 中,scope 对象是从 el-table 的数据中传递过来的,包含了当前行的数据以及当前列的信息。通过 scope.$index 可以获取当前行的索引,从而实现序号的显示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![mp4](https://img-home.csdnimg.cn/images/20210720083504.png)