点击表格某项,弹窗显示相应表格数据vue
1.效果图2.相关代码(1)点击按钮,在template内(2)弹窗页面,在template内(3)弹窗表格内容,在script内
·
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="landList">
<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 {landInfo} from "@/api/xxx/xxx";
export default {
data() {
return {
// 遮罩层
loading: true,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
landList:[],
landId:null,
};
},
methods: {
handleLandClick(row) {
this.open=true;
this.title="土地详情"
console.log(row.landId)
//根据id调用后端给的接口
landInfo(row.landId).then((response) => {
this.landList=response.data
console.log(response)
})
},
}
};
更多推荐
已为社区贡献3条内容
所有评论(0)