• el-table通过scope.row获取表格每列的值,以及scope.$index


    1. <el-table-column type="selection" width="55"></el-table-column>
    2. <el-table-column prop="id" label="ID" width="80"></el-table-column>
    3. <el-table-column prop="name" label="文件名称"></el-table-column>
    4. <el-table-column prop="type" label="文件类型"></el-table-column>
    5. <el-table-column prop="size" label="文件大小(kb)"></el-table-column>
    6. <el-table-column label="下载">
    7. <template slot-scope="scope">
    8. <el-button type="primary" @click="download(scope.row.url)">下载</el-button>
    9. </template>
    10. </el-table-column>
    11. <el-table-column label="启用">
    12. <template slot-scope="scope">
    13. <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc" @change="changeEnable(scope.row)"></el-switch>
    14. </template>
    15. </el-table-column>
    16. <el-table-column label="操作" width="200" align="center">
    17. <template slot-scope="scope">
    18. <el-popconfirm
    19. class="ml-5"
    20. confirm-button-text='确定'
    21. cancel-button-text='我再想想'
    22. icon="el-icon-info"
    23. icon-color="red"
    24. title="您确定删除吗?"
    25. @confirm="del(scope.row.id)"
    26. >
    27. <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
    28. </el-popconfirm>
    29. </template>
    30. </el-table-column>
    31. </el-table>
    32. ---------------------------------------------------------------------------------
    33. data() {
    34. return {
    35. tableData: [],}}
    36. ---------------------------------------------------------------------------------
    37. load() {
    38. this.request.get("/file/page", {
    39. params: {
    40. pageNum: this.pageNum,
    41. pageSize: this.pageSize,
    42. name: this.name,
    43. }
    44. }).then(res => {
    45. this.tableData = res.data.records
    46. this.total = res.data.total
    47. })

    如上所示,scope.row是一个双向绑定的过程,当前行数据的获取也会用到插槽,scope相当于一行的数据, scope.row相当于当前行的数据对象。我们这里的scope绑定到了tableData。tableData在通过res.data.records调用返回值拿到后台数据库的数据,这样scope.row就会显示数据库对应条目数据,也可以进行传值到后端进行修改。

    label是显示的文字

    prop是对应获取数据的属性名

    scope.row.xxx是获取相对应的一个表格中的数据

    scope.$index是获取这一行的索引

    注意:

    ①一定要用template包裹着才可以

    ②scope.row是获取这一行数据,scope.row.xxx是获取相对应的一个表格中的数据

    ③scope.$index是获取这一行的索引

  • 相关阅读:
    JavaScript拖放操作的实现
    Android笔记--WebSocket
    YoloV:视频中目标实时检测依然很棒(附源代码下载)
    永磁同步电机36问(三)——SVPWM代码实现
    React Router6的用法
    IDEA2022.3 @Slf4j cannot find symbol 无法解析问题处理
    深入理解磁盘阵列(RAID)和逻辑卷管理(LVM)技术及应用指南
    作业来了~~~
    解决nomachine扫描不出ip问题
    第一次使用idea运行报错,说构建失败
  • 原文地址:https://blog.csdn.net/weixin_52512511/article/details/133764024