<el-table :data="userDatas" border style="width: 90%">
      <el-table-column type="index" label="序号" width="100" align="center"></el-table-column>
      <el-table-column prop="userName" label="姓名" width="120" align="center"></el-table-column>
      <el-table-column prop="userPhone" label="电话" width="150" align="center"></el-table-column>
      <el-table-column prop="userAddress" label="地址" width="240" align="center"></el-table-column>
      <el-table-column style="align: center" fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.$index)" type="text" size="small" icon="el-icon-edit">编辑</el-button>
          <el-button @click="deleteUserByUserName(scope.row,scope.$index)" type="text" size="small" icon="el-icon-delete" style="color: red">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
  • type="index":就是显示序号
  • scope.$index:就是选中行的下标
  • scope.row:就是选中行的所有的信息
  • 例如：scope.row.userName:获取用户姓名
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

口才教育：如何提升沟通技巧与表达能力

avatar ViewDesign
cover

C 嵌入式系统设计模式 28：通道模式

avatar ViewDesign

优雅的前端框架：iView - 强大、易用且美观

优雅的前端框架：iView - 强大、易用且美观项目地址:https://gitcode.com/gh_mirrors/iv/iview是一个基于 Vue.js 的高质量 UI 组件库，旨在为开发者提供简单、直观、高效的基础组件，帮助他们快速构建现代 Web 应用程序。此项目由 Alibaba IVWEB 团队维护，质量与更新稳定性有保障。技术分析Vue.js 基础：iView 充分利...

avatar ViewDesign