Click on an item in the table, and a pop-up window will display the corresponding table data vue

1. Effect drawing

2.Related code 

 Click the button in the 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>

 Pop-up page, within 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>

The content of the pop-up window table is in the script 

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)
      })
    },
  }
};