1.效果图
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内
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)
})
},
}
};
本文转载自: https://blog.csdn.net/m0_68428581/article/details/128416141
版权归原作者 m0_68428581 所有, 如有侵权,请联系我们删除。
版权归原作者 m0_68428581 所有, 如有侵权,请联系我们删除。