vue-element 表格查询条件封装

<template>
  <el-form :inline="true" :model="formInline" class="user-search">
    <el-form-item label="关键词">
      <el-input v-model="formInline.keyword" placeholder="用户名/邮箱/手机号"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="formInline.status" placeholder="请选择状态">
        <el-option label="启用" value="enabled"></el-option>
        <el-option label="禁用" value="disabled"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      formInline: {
        keyword: '',
        status: ''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('提交的查询条件:', this.formInline);
      // 这里可以调用API进行查询操作
    }
  }
};
</script>
 
<style>
.user-search {
  margin-top: 10px;
}
</style>

这个代码实例展示了如何在Vue.js中使用Element UI库创建一个简单的用户搜索表单。用户可以输入关键词、选择状态，然后点击“查询”按钮提交表单，触发onSubmit方法。在onSubmit方法中，可以执行进一步的数据查询操作。这个实例简洁明了，适合作为Vue和Element UI结合使用的教学示例。