用elementui写一个机票常用联系人页面

以下是一个简单的使用elementui写的机票常用联系人页面，包括表单、表格、弹窗等组件：

<template>
  <div class="contact-page">
    <el-form :model="form" ref="form" label-width="100px" class="contact-form">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="证件类型" prop="idType">
        <el-select v-model="form.idType">
          <el-option label="身份证" value="身份证"></el-option>
          <el-option label="护照" value="护照"></el-option>
          <el-option label="港澳通行证" value="港澳通行证"></el-option>
          <el-option label="台湾通行证" value="台湾通行证"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="证件号码" prop="idNumber">
        <el-input v-model="form.idNumber"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" class="contact-table">
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="idType" label="证件类型"></el-table-column>
      <el-table-column prop="idNumber" label="证件号码"></el-table-column>
      <el-table-column prop="phone" label="手机号码"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="编辑联系人" :visible.sync="dialogVisible">
      <el-form :model="editForm" ref="editForm" label-width="100px" class="contact-form">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="editForm.name"></el-input>
        </el-form-item>
        <el-form-item label="证件类型" prop="idType">
          <el-select v-model="editForm.idType">
            <el-option label="身份证" value="身份证"></el-option>
            <el-option label="护照" value="护照"></el-option>
            <el-option label="港澳通行证" value="港澳通行证"></el-option>
            <el-option label="台湾通行证" value="台湾通行证"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码" prop="idNumber">
          <el-input v-model="editForm.idNumber"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updateForm">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        idType: '',
        idNumber: '',
        phone: ''
      },
      editForm: {
        name: '',
        idType: '',
        idNumber: '',
        phone: ''
      },
      tableData: [
        {
          name: '张三',
          idType: '身份证',
          idNumber: '110101198001010001',
          phone: '13800138000'
        },
        {
          name: '李四',
          idType: '护照',
          idNumber: 'G12345678',
          phone: '13800138001'
        },
        {
          name: '王五',
          idType: '台湾通行证',
          idNumber: 'T12345678',
          phone: '13800138002'
        }
      ],
      dialogVisible: false
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.tableData.push(this.form)
          this.form = {
            name: '',
            idType: '',
            idNumber: '',
            phone: ''
          }
        }
      })
    },
    handleEdit(row) {
      this.dialogVisible = true
      this.editForm = Object.assign({}, row)
    },
    updateForm() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          const index = this.tableData.findIndex(
            item => item.id === this.editForm.id
          )
          this.tableData.splice(index, 1, this.editForm)
          this.dialogVisible = false
        }
      })
    },
    handleDelete(row) {
      const index = this.tableData.findIndex(item => item.id === row.id)
      this.tableData.splice(index, 1)
    }
  }
}
</script>

<style>
.contact-page {
  padding: 20px;
}

.contact-form {
  margin-bottom: 20px;
}

.contact-table {
  margin-top: 20px;
}

.el-dialog__body {
  padding: 20px;
}
</style>

注意，这只是一个示例，实际应用中需要根据具体需求进行调整。