用elementui写一个常用联系人列表并添加选择框可以多个选择进行批量删除并且可以查询和新增

以下是一个基于ElementUI的常用联系人列表示例，包含了多选框、批量删除、查询和新增功能：

<template>
  <div>
    <el-input v-model="searchText" placeholder="搜索联系人" @keyup.enter.native="searchContacts" style="width: 200px; margin-bottom: 10px;"></el-input>
    <el-button type="primary" @click="addContact">新增联系人</el-button>
    <el-button type="danger" :disabled="selectedContacts.length === 0" @click="deleteSelectedContacts">批量删除</el-button>
    <el-table :data="filteredContacts" :row-key="contact => contact.id" @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" @click="deleteContact(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增联系人" :visible.sync="addContactDialogVisible">
      <el-form :model="newContact" label-position="left" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="newContact.name"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="newContact.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="newContact.email"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addContactDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addContactSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      contacts: [
        { id: 1, name: '张三', phone: '13812345678', email: 'zhangsan@example.com' },
        { id: 2, name: '李四', phone: '13912345678', email: 'lisi@example.com' },
        { id: 3, name: '王五', phone: '15812345678', email: 'wangwu@example.com' },
        { id: 4, name: '赵六', phone: '18812345678', email: 'zhaoliu@example.com' }
      ],
      searchText: '',
      selectedContacts: [],
      addContactDialogVisible: false,
      newContact: {
        name: '',
        phone: '',
        email: ''
      }
    }
  },
  computed: {
    filteredContacts() {
      return this.contacts.filter(contact => {
        const searchRegex = new RegExp(this.searchText, 'i')
        return searchRegex.test(contact.name) || searchRegex.test(contact.phone) || searchRegex.test(contact.email)
      })
    }
  },
  methods: {
    handleSelectionChange(selectedContacts) {
      this.selectedContacts = selectedContacts
    },
    deleteContact(contact) {
      const index = this.contacts.indexOf(contact)
      if (index !== -1) {
        this.contacts.splice(index, 1)
      }
    },
    deleteSelectedContacts() {
      this.selectedContacts.forEach(contact => {
        this.deleteContact(contact)
      })
      this.selectedContacts = []
    },
    addContact() {
      this.addContactDialogVisible = true
    },
    addContactSubmit() {
      const id = this.contacts.length > 0 ? this.contacts[this.contacts.length - 1].id + 1 : 1
      this.contacts.push({ id, ...this.newContact })
      this.addContactDialogVisible = false
      this.newContact = { name: '', phone: '', email: '' }
    },
    searchContacts() {
      // Do nothing, since we're using computed property to filter contacts
    }
  }
}
</script>

在这个示例中，我们使用了el-table来显示联系人列表，使用el-input来进行搜索，使用el-button来进行新增和批量删除操作，使用el-dialog来弹出新增联系人的对话框。

我们在data中定义了contacts数组来存储联系人信息，searchText来存储搜索文本，selectedContacts来存储选中的联系人，addContactDialogVisible来控制新增联系人对话框的显示，newContact来存储新增联系人的信息。

在computed中，我们定义了filteredContacts计算属性来根据搜索文本过滤联系人列表。

在methods中，我们定义了handleSelectionChange方法来处理选中联系人的变化，deleteContact方法来删除单个联系人，deleteSelectedContacts方法来删除选中的联系人，addContact方法来打开新增联系人对话框，addContactSubmit方法来提交新增联系人的信息，searchContacts方法来进行搜索操作。