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

复制代码
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="name" label="文件名称"></el-table-column>
      <el-table-column prop="type" label="文件类型"></el-table-column>
      <el-table-column prop="size" label="文件大小(kb)"></el-table-column>
      <el-table-column label="下载">
        <template slot-scope="scope">
          <el-button type="primary" @click="download(scope.row.url)">下载</el-button>
        </template>
      </el-table-column>
      <el-table-column label="启用">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.enable" active-color="#13ce66" inactive-color="#ccc" @change="changeEnable(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作"  width="200" align="center">
        <template slot-scope="scope">
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗?"
              @confirm="del(scope.row.id)"
          >
            <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
---------------------------------------------------------------------------------
 data() {
    return {
      tableData: [],}}
---------------------------------------------------------------------------------
load() {
      this.request.get("/file/page", {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          name: this.name,
        }
      }).then(res => {

        this.tableData = res.data.records
        this.total = res.data.total

      })

如上所示,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是获取这一行的索引

相关推荐
paopaokaka_luck10 小时前
宠物门店经营管理系统(销售与库存联动、进货自动记账、 退换与退款关联、员工个人业绩、ECharts 经营分析、滞销识别与客户分层、宠物档案年龄计算)
前端·javascript·spring boot·mysql·echarts·mybatis·1024程序员节
paopaokaka_luck12 小时前
心理咨询管理系统(WebSocket实时沟通、基于用户的协同过滤、 ECharts多维分析、 预约业务流程、预约校验与定时处理)
java·vue.js·spring boot·mysql·spring·echarts·1024程序员节
鶴哥只手遮天14 小时前
jQuery 4.0 源码架构与工程实践-第 10 章 尺寸、几何与显隐
前端·javascript·jquery
米米商聊16 小时前
图标能点,按钮就可用了吗?键盘、名称与收藏状态
前端·javascript
漫天转悠17 小时前
Vue3白屏排查实录-Transition与多根模板
vue.js·1024程序员节
技术小甜甜18 小时前
【Cursor】Skill 被标黄色警告,怎么改成合格的 SKILL.md
开发语言·javascript·ai编程·cursor·1024程序员节·ai agent·skills
qetfw19 小时前
Bash 函数与流程控制:read、if、for、case 验证
linux·前端·javascript·bash
jason.zeng@150220719 小时前
Nginx 配置详解(静态 HTML、下载目录、API 反向代理三套场景)
java·vue.js·1024程序员节
鬼手点金19 小时前
从 API 消息到模型 Token:Chat Template
java·前端·javascript·数据库·人工智能·深度学习·1024程序员节
Mr.Pascal21 小时前
Javascript之什么是作用域?
javascript·1024程序员节