1.效果圖

2.相關(guān)代碼?

?點(diǎn)擊按鈕，在template內(nèi)

<el-table-column label="關(guān)聯(lián)土地(宗)" align="right" prop="landNum" width="150">
   <template slot-scope="scope">
      <span v-if="scope.row.landNum==0">未關(guān)聯(lián)</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>

?彈窗頁(yè)面，在template內(nèi)

 <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="序號(hào)" width="50" align="center"/>
      <el-table-column label="宗地編碼" align="left" prop="landCode" />
      <el-table-column label="宗地名稱" align="left" prop="landName" />
    </el-table>
</el-dialog>

彈窗表格內(nèi)容，在script內(nèi)?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-503201.html

import { selectLandInfoByWarrantId} from "@/api/remp/land";
export default {
  data() {
    return {
      // 遮罩層
      loading: true,
      // 彈出層標(biāo)題
      title: "",
      // 是否顯示彈出層
      open: false,
      baseLandList:[],
      warrantId:null,
    };
  },
methods: {
    handleLandClick(row) {
      this.open=true;
      this.title="土地詳情"
      console.log(row.warrantId)
      //根據(jù)id調(diào)用后端給的接口
      selectLandInfoByWarrantId(row.warrantId).then((response) => {
        this.baseLandList=response.data
        console.log(response)
      })
    },
  }
};

到了這里，關(guān)于點(diǎn)擊表格某項(xiàng)，彈窗顯示相應(yīng)表格數(shù)據(jù)vue的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！