假如你的项目经理要求你使用elementui中的table实现一个通过点击表格外部按钮来修改选中行数据的功能

平平无奇的html

一个按钮加上一个可以多选的列表

<el-button type="primary" @click="edit()">编辑</el-button>
// 按钮不重要，重要的是下面这个表格
<el-table :data="tableData" ref="tableSelection" style="width: 100%" border highlight-current-row @selection-change="handleSelectionChange">
//其他表格中重要的代码此处省略10086

上面是大概的雏形，接下来别眨眼，我要开始注入灵魂了

灵魂js部分

//闪亮登场的是一个饿了吗的方法，在这个方法里面我们可以获取到当前选中的行数据
handleSelectionChange(val) {   
//再加上一个平平无奇的判断，就实现了这个傻逼功能
      if (val.length <= 1) {
        console.log(val[0])
        this.dialogForm.ID=val[0].ID
        this.dialogForm.dialogName=val[0].NAME
        this.dialogForm.dialogModule=val[0].PART_ID
        this.dialogForm.dialogRole=val[0].REMARK
        this.dialogForm.dialogStatus.value=val[0].VALID
      }else{
        this.dialogForm={}
        this.selection = []
        this.$refs.tableSelection.clearSelection()
        this.$message({type:'error',message:'只支持修改单项数据，为您清空当前选择！'})
      }

以上为本次分享的全部代码，如果有帮助到你的话欢迎点赞评论收藏~
我们下篇分享再见啦~