一、先上效果
其实难点是如何拿到该行记录我们需要的唯一属性,简单的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开始