Vue：Element-UI 弹出窗口el-dialog使用iframe加载外部页面内容

想要实现如下效果

在页面中点击链接，弹出窗口，窗口中加载指定的页面内容

1.vue文件内容

html部分的代码

<el-link type="success" @click="test">主要链接</el-link>    
<el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="80%"
      height="100%"
      :before-close="handleClose"
    >
      <iframe src="http://www.baidu.com" frameborder="0" width="100%" height="600px"></iframe>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

js部分的代码

export default {
  name: "indexJK",
  data() {
    return {
      name: "indexJK", 
      dialogVisible: false, //弹出框
    };
  },
  methods: {
    test() {
      this.dialogVisible = true;
    }
  }
};
</script>

2.运行效果