element ui表格中如何在行内加入对该行记录的操作（删除/编辑/查看）

一、先上效果

 

其实难点是如何拿到该行记录我们需要的唯一属性，简单的jq容易通过遍历可得，但是用了Element ui就要根据官网规则使用

 

二、好，找到官网的使用说明：https://element.eleme.cn/#/zh-CN/component/table

 

 

三、找到需求所对应的案例

四、具体的代码片段 ：页面代码

js代码 

 

 

五、根据以上官网所得信息，我们开始编写自己需求页面，以删除为例，其他操作更简单

首先页面编写如下

<el-table-column prop="rlStatus" label="操作" align='center'>
   <template slot-scope="itemList">
      <a class="a-edit" v-if='itemList.row.rlStatus=="N"' target="_blank" :href="'/webRoleAction_find.html?roleExt.rlCode='+itemList.row.rlCode">编辑</a>
      <el-button v-if='itemList.row.rlStatus=="N"'
               @click.native.prevent="sinDelRole(itemList.$index, itemList.row)"
            type="text"
            size="medium">
         删除
      </el-button>
      <a v-else :href="'/webRoleAction_find.html?roleExt.rlCode='+itemList.row.rlCode">查看</a>
   </template>
</el-table-column>

 

其中所需数据绑定来自，主要数据集合为itemList

 

以及后台的请求结果赋值itemList

 

六、加入对应操作事件功能方法

 

总结以上：

1.

that.itemList= rspData.result;//获得数据集合

2. 控件中的slot-scope="itemList"遍历数据记录

3. 列表格中嵌入操作事件

    <el-button v-if='itemList.row.rlStatus=="N"' @click.native.prevent="sinDelRole(itemList.$index, itemList.row)" type="text" size="medium"> 删除 </el-button>

4.  js实现具体业务

  sinDelRole:function (index, row) 

参数列表中的row为一条完整记录，可通过console.log(row)输出查看

index为该记录的索引，从0开始