点击表格某项，弹窗显示相应表格数据vue-Toy模板网

这篇具有很好参考价值的文章主要介绍了点击表格某项，弹窗显示相应表格数据vue。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.效果图

点击表格某项，弹窗显示相应表格数据vue

2.相关代码

点击按钮，在template内

<el-table-column label="关联土地(宗)" align="right" prop="landNum" width="150">
   <template slot-scope="scope">
      <span v-if="scope.row.landNum==0">未关联</span>
      <span v-else>
         <el-button type="text"  @click="handleLandClick(scope.row)" style="padding:0">
           {{ scope.row.landNum }}
         </el-button>
      </span>
   </template>
</el-table-column>

弹窗页面，在template内

 <el-dialog
    :title="title"
    :visible.sync="open"
    width="500px"
    class="dialogLand"
    append-to-body
>
    <el-table v-loading="loading" :data="baseLandList">
      <el-table-column type="index" label="序号" width="50" align="center"/>
      <el-table-column label="宗地编码" align="left" prop="landCode" />
      <el-table-column label="宗地名称" align="left" prop="landName" />
    </el-table>
</el-dialog>

弹窗表格内容，在script内文章来源地址https://www.toymoban.com/news/detail-503201.html

import { selectLandInfoByWarrantId} from "@/api/remp/land";
export default {
  data() {
    return {
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      baseLandList:[],
      warrantId:null,
    };
  },
methods: {
    handleLandClick(row) {
      this.open=true;
      this.title="土地详情"
      console.log(row.warrantId)
      //根据id调用后端给的接口
      selectLandInfoByWarrantId(row.warrantId).then((response) => {
        this.baseLandList=response.data
        console.log(response)
      })
    },
  }
};

到了这里，关于点击表格某项，弹窗显示相应表格数据vue的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！