vue引入一个页面

效果图：

 

组件：
<!-- 按钮 -->
<a-button
      style="background-color: transparent;margin-right: 20px; color: white"
      icon="download"
      :size="size"
      @click="openForm"
    >

<!-- 引入框 -->
    <a-modal title="下载" :visible="visible" :width="700" :footer="null">
      <div class="dialog-main" style="height:500px">
        <formPage></formPage>
      </div>
    </a-modal>

<!-- 引入地址 -->
import formPage from '@/components/download/index.vue'


<!-- 注册组件 -->
export default {
  name: 'HeaderAvatar',
  components: { UserPasswordModal, formPage },
  data() {
    return {
      visible: false,
      userPasswordModalProps: {
        visible: false
      }
    }
  }


<!-- 方法 -->
methods: {
    openForm() {
      this.visible = !this.visible
    }
}




<!-- 基础组件 -->
<template>
  <div style="display: flex; flex-direction: row; height:100%;">
    <div style="width: 50%; height:101%;overflow: scroll;">
      <span style="font-weight：900;">字段选择</span>
      <a-table
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="data"
        style="width:100%;"
        :pagination="false"
      />
    </div>
    <div style="width: 50%">
      <span style="font-weight：900;">导出文件位置</span>
      <a-form-model
        :model="form"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item v-bind="formItemLayout">
          <span slot="label">文件名</span>
          <a-input v-model="form.filename" placeholder="以默认格式填充" />
        </a-form-model-item>
        <a-form-model-item v-bind="formItemLayout">
          <span slot="label">文件筛选筛选条件</span>
          <a-select v-model="form.filetype" placeholder="CSV">
            <a-select-option value="shanghai"> CSV </a-select-option>
            <a-select-option value="beijing"> Excel </a-select-option>
            <a-select-option value="beijing"> Txt </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item v-bind="formItemLayout">
          <span slot="label">文件最大行数</span>
          <a-input-number
            v-decorator="['文件最大行数', { initialValue: 3 }]"
            :min="1"
            :max="10"
          />
        </a-form-model-item>
        <a-form-model-item v-bind="formItemLayout">
          <span slot="label">文件筛选筛选条件</span>
          <a-textarea
            v-model="value"
            placeholder="一个筛选条件一行，用分号分隔;"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary"> 当前页面导出 </a-button>
          <a-button type="primary"> 全量导出 </a-button>
          <a-button type="primary"> 取消 </a-button>
        </a-form-model-item>
      </a-form-model>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: '全选',
    dataIndex: 'allSelect'
  }
]
const data = []
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    allSelect: 32,
    address: `London, Park Lane no. ${i}`
  })
}
export default {
  data() {
    return {
      formItemLayout: {
        labelCol: { span: 14 },
        wrapperCol: { span: 10 }
      },
      data,
      columns,
      selectedRowKeys: [] // Check here to configure the default column
    }
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: this.onSelectChange,
        hideDefaultSelections: true,
        onSelection: this.onSelection
      }
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'validate_other' })
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>