vue elementui查询列表假数据 包含性别 年龄 职位 年薪

以下一个简单的 Vue ElementUI 查询列表假数据的示例，包含性别，年龄，职位和年薪：

<template>
  <div>
    <el-form :inline="true">
      <el-form-item label="性别">
        <el-select v-model="filter.gender" placeholder="请选择">
          <el-option label="男" value="male"></el-option>
          <el-option label="女" value="female"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="filter.age" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="职位">
        <el-input v-model="filter.job" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="年薪">
        <el-input v-model="filter.salary" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getData">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="gender" label="性别"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="job" label="职位"></el-table-column>
      <el-table-column prop="salary" label="年薪"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        gender: '',
        age: '',
        job: '',
        salary: ''
      },
      tableData: [
        {gender: '男', age: 25, job: '程序员', salary: '10万/年'},
        {gender: '女', age: 30, job: '设计师', salary: '8万/年'},
        {gender: '男', age: 35, job: '产品经理', salary: '15万/年'},
        {gender: '女', age: 28, job: '运营专员', salary: '6万/年'},
      ]
    }
  },
  methods: {
    getData() {
      // 这里可以根据筛选条件过滤数据
    }
  }
}
</script>

在这个示例中，我们使用了 `el-form` 和 `el-table` 组件来实现查询列表。`el-form` 组件包含了一个筛选表单，用户可以在表单中选择或输入筛选条件。`el-table` 组件则展示了筛选后的数据列表。

筛选条件保存在 `filter` 对象中，初始值为空。当用户点击查询按钮时，`getData` 方法会被调用，这里可以根据筛选条件过滤数据。由于我们是使用假数据，这个方法暂时没有实现任何功能。

最后，我们使用 `el-table-column` 组件来定义表格列，其中 `prop` 属性指定了该列对应的数据属性，`label` 属性指定了该列的标题。