2021-06-08按行绑定数据

今天拔牙么

于 2021-06-17 16:09:37 发布

阅读量100

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_48271592/article/details/117694801

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

本文介绍了一个在Vue中实现表格行点击展示详情信息的示例。通过监听表格内详情按钮的点击事件，调用接口传递当前行的ID，获取并显示对应的数据。代码演示展示了如何在`el-table-column`中定义模板，以及在`methods`中定义`getDetails`方法来获取详细信息。

摘要由CSDN通过智能技术生成

按行绑定数据

1.需求：

看下图，实现点击每一行的详情按钮或其每一行的详情

点击详情按钮前：

点击详情按钮后出现弹窗，弹窗里的信息就是 id对应的数据

点击详情按钮后

实现过程：需要往后台提供的接口里传此行对应的id

2.代码演示：

 <el-table-column prop="sort" label="详情" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button icon="el-icon-more" @click="getDetails(scope.row.id)"></el-button>
          </template>
</el-table-column>

methods:{
    // 详情
    getDetails(id) {
    //   this.details = true
      this.$http
        .get(
          "/pub/getExpertById",
          { params: {expertId:id}},
          {
            emulateJSON: true,
          }
        )
        .then(({ data }) => {
          console.log("详情信息：",data);
        });
    },
}