问题描述：

        vue 项目使用  element 表格， 给表格整行添加 点击事件，配合 Dialog 完成表格某个属性的展示

解决方法

 在 el-table 中添加  @row-click="rowClick" 

 <el-table :data="AccountData" 

       v-loading="Loading"  

        element-loading-text="拼命加载中" 

         @row-click="rowClick"

        style="width: 100%" border>

 添加 Dialog 组件

这个 组件我是 放在 el-table 外部

  <!-- 弹窗组件 显示 ArticleContent 字段内容 -->

       <el-dialog

            title="ArticleContent"

            :visible.sync="dialogVisible"

            width="90%"

            >  

               <span style="font-size:16px">{{ArticleContent}}</span>

        </el-dialog>

 data 中 内容

data(){

      return{

          dialogVisible:false,

          ArticleContent:' '

      }

  },

 在 methods 添加方法

 rowClick 函数 第一个参数是点击的行参数，第二个是行下标

methods:{

      rowClick(record,index){ 

          this.dialogVisible = true

          this.ArticleContent = record.ArticleContent

      },

 效果展示

上述代码 添加完成后，点击 表格整行事件 已经 绑定成功 ，点击出现以下效果

总结

本文展示的需求是 点击整行 打开 Dialog 弹窗 ，这个当然还有其他很多需求（比如 点击 整行 关闭或者展开某个数据），只需要改 methods 里函数中的代码就好了 ，这个功能实现的 重点 是给 表格添加 @row-click="rowClick" 

---

文章如有错误，恳请大家提出问题，本人不胜感激 。 不懂的地方可以评论，我都会一一回复

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长

  转载请注明出处：https://blog.csdn.net/qq_52855464/article/details/125318601?spm=1001.2014.3001.5501